logo Home Color Chart Chat HTML Editor E mail Google
HTML
  Body
  Tables
  Marquee
  Lists
  Links
  Video
  Audio
  Text
  Forms
  Frames
  Buttons
CSS
  Body
  Tables
  Divs
  Links
  Video
  Float
  Text
  Navigation
  DropDown
  Buttons
chinito

CSS Vertical Menu Dropdown



Menu ID :Dropdown Click

<DOCTYPE html>
<html>

<head>

<style>

.dropdown {
                   font-size: 20px;
                   display: inline-block;

}

.dropdownbtn {
                   background-color: #4CAF50;
                   color: white;
                   padding: 5px;
                   font-size: 12px;
                    border: none;
                    cursor: pointer;
                    width: 400px;
}

.dropdown-content {
                    white;display: none;
                     position: absolute;
                     background-color: red;
                     min-width: 400px;
                     box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
}

.dropdown:hover .dropdownbtn {
                      background-color: #3e8e41;
}

.dropdown-content a:hover {background-color: #f1f1f1}



.dropdown-content a {
                    color: black;
                      padding: 12px 1red;
                     text-decoration: none;
                     display: block;
}

.dropdown:hover .dropdown-content {
                     display: block;
}

</style>

</head>

<body>

<div class="dropdown">
<button class="dropbtn">LANGUAGE - TRANSLATION ▼</button>
<div class="dropdown-content">
<a href="http://www.partyhtml.com/english-spanish">ENGLISH - SPANISH</a>
<a href="http://www.partyhtml.com/spanish-english">SPANISH - ENGLISH </a>
<a href="http://www.partyhtml.com/english-tagalog">ENGLISH - TAGALOG</a>
<a href="http://www.partyhtml.com/tagalog-english">TAGALOG - ENGLISH</a>

</div>

</body>

</html>