CSS/HTML: Dropdown menu

Voorbeeld

Top download Windows apps Javascripts Online tools Retro Chatbox

Voorbeeld

Kopie script

Select & Copy HTML #1 Chrome

Select & Copy CSS

.dropbtn {
 background-color: #555555cc;
  color: #555;
 padding: 2px 20px 3px 20px;
  font-size: 0.92em;
  border: none;
width: 150px;

}
.dropper {
  padding: 1px 8px 2px 8px;
 // border-radius: 5px 5px 0 0;
  width: 155px;
  background: #777;
  color: #fff;
}
.dropmenu {
  border-radius: 0;

}

.dropmenu-content {
color: #888;
border-radius: 10px;
  display: none;
  position: absolute;
  background-color: #f1f1f1cc;
  min-width: 164px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 99991;
  margin: 0 0 0 1px;
}

.dropmenu-content a {
text-align: initial;
/* border-radius: 0 0 10px 10px; */
  color: #777;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
  z-index: 99991;
}

.dropmenu-content link:hover {
/* border-radius: 30px; */
  color: #cccc00;
  z-index: 99991;
}
.dropper {
  padding: 1px 8px 2px 8px;
  border-radius: 5px 5px 0 0;
  width: 165px;
  background: #777;
  color: #fff;
}

.dropmenu-content a {
  text-align: initial;
  color: #ccc;
  border-radius: 0 0 10px 10px;
  color: #333;
  padding: 5px 1px 7px 10px;
  text-decoration: none;
  display: block;
  z-index: 99991;
}

.dropmenu-content a:hover {background-color: #ddd;}

.dropmenu:hover .dropmenu-content {display: block;color: #eee;}

.dropmenu:hover .dropbtn {background-color: #888;}
 
   
    
}
</style>

Select & Copy Alles in één

<div class="dropmenu-content">
        
        <a href="https://tooljunkie.nl/tag/top">Top download</a> 
        <a href="https://tooljunkie.nl/tag/windows">Windows apps</a> 
        <a href="https://tooljunkie.nl/alle-scripts">Javascripts</a> 
        <a href="https://tooljunkie.nl/online-tools/">Online tools</a> 
        <a href="https://retrochat.nl" target="_blank">Retro Chatbox</a>

</div> </div>

.dropbtn {
 background-color: #555555cc;
  color: #555;
 padding: 2px 20px 3px 20px;
  font-size: 0.92em;
  border: none;
width: 150px;

}
.dropper {
  padding: 1px 8px 2px 8px;
 // border-radius: 5px 5px 0 0;
  width: 155px;
  background: #777;
  color: #fff;
}
.dropmenu {
  border-radius: 0;

}

.dropmenu-content a {
text-align: initial;
/* border-radius: 0 0 10px 10px; */
  color: #777;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
  z-index: 99991;
}

.dropmenu-content a {
  text-align: initial;
  color: #ccc;
  border-radius: 0 0 10px 10px;
  color: #333;
  padding: 5px 1px 7px 10px;
  text-decoration: none;
  display: block;
  z-index: 99991;
}

.dropmenu-content a:hover {background-color: #ddd;}

.dropmenu:hover .dropmenu-content {display: block;color: #eee;}

.dropmenu:hover .dropbtn {background-color: #888;}
 
   
    
}
</style>

CSS/HTML: Dropdown menu

Voorbeeld

Voorbeeld

Kopie script

Geef een reactie Reactie annuleren