Create Drop down menu with CSS only - HTML CSS CSS Widget

HTML CSS examples for CSS Widget:Menu Dropdown

  1. HOME
  2. HTML CSS
  3. CSS Widget
  4. Menu Dropdown

Description

Create Drop down menu with CSS only

Demo Code

ResultView the demo in separate window 

<html>
 <head> 
  <meta name="viewport" content="width=device-width, initial-scale=1"> 
  <style id="compiled-css" type="text/css">

.topnav{<!--from   ww  w.  j av a 2s. c om-->
   list-style-type: none;
   margin: 0;
   padding: 0;
   overflow: hidden;
   background-color: #333;
   margin:0 auto;
   text-align:center;
}
.topnav li {
   float: left;
}
.topnav li a, .dropbtn {
   display: inline-block;
   color: white;
   text-align: center;
   padding: 14px 16px;
   text-decoration: none;
   width:120px;
}
.topnav li a:hover, .dropdown:hover .dropbtn {
   background-color: #111;
}
li.dropdown {
   display: inline-block;
}
.dropdown-content {
   display: none;
   position: absolute;
   background-color: #f9f9f9;
   min-width: 160px;
   box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
   z-index: 1;
}
.topnav .dropdown-content a {
   color: black;
   padding: 12px 16px;
   text-decoration: none;
   display: block;
   text-align: left;
}
.topnav .dropdown-content a:hover {background-color: #f1f1f1;}
.dropdown:hover .dropdown-content {
   display: block;
}
.top{
   display: flex;
   align-content: space-between;
   align-items: center;
}
.top a{
   margin: 0 5px;
}
.top h1, .top a{
   flex: 0 1 auto;
}
.top form{
   flex: 1 1 auto;
   vertical-align:middle;
}


      </style> 
 </head> 
 <body> 
  <div class="top"> 
   <h1>TDX</h1> 
   <form> 
    <div> 
     <input type="search" id="mySearch" name="q" placeholder="Search the site..." size="50"> 
     <button>Search</button> 
    </div> 
   </form> 
   <a href=""> <h4>Account</h4> </a> 
   <a href=""> <h4>Cart</h4> </a> 
  </div> 
  <ul class="topnav"> 
   <li> <a class="active" href="index.html">Home</a> </li> 
   <li class="dropdown"> <a href="javascript:void(0)" class="dropbtn">Products</a> 
    <div class="dropdown-content"> 
     <a href="#">Computers</a> 
     <a href="#">Tablets</a> 
     <a href="#">Cell Phones</a> 
     <a href="#">Wearable Technologies</a> 
     <a href="#">Accessories</a> 
    </div> </li> 
   <li class="dropdown"> <a href="javascript:void(0)" class="dropbtn">Brands</a> 
    <div class="dropdown-content"> 
     <a href="#">Apple</a> 
     <a href="#">Samsung</a> 
     <a href="#">Lenovo</a> 
     <a href="#">Dell</a> 
     <a href="#">HP</a> 
     <a href="#">Sony</a> 
     <a href="#">Panasonic</a> 
     <a href="#">Motorola</a> 
     <a href="#">HTC</a> 
    </div> </li> 
   <li> <a href="deals.html">Deals</a> </li> 
  </ul>  
 </body>
</html>

Related Tutorials