Create dropdown menu with multiple columns - 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 dropdown menu with multiple columns

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">

nav {<!--from w  w w.  jav  a  2s .  c o m-->
   background-color: #cccccc;
}
nav ul {
   margin: 0;
   padding: 5px;
}
nav ul li {
   display: inline;
   position: relative;
}
nav ul li div {
   position: absolute;
   left: -9999px;
   width:300px;
}
nav ul li:hover div {
   left: 0;
}
nav ul li ul li {
   display: list-item;
   list-style: none;
   margin: 0;
   padding: 0;
}
nav ul li ul{
   display:inline-block;
   margin: 0;
   padding: 0;
}


      </style> 
 </head> 
 <body> 
  <nav> 
   <ul> 
    <li> <a href="#">Top Level Group</a> 
     <div> 
      <ul> 
       <li> <a href="#">Sub One</a> </li> 
       <li> <a href="#">Sub Two</a> </li> 
       <li> <a href="#">Sub Three</a> </li> 
       <li> <a href="#">Sub Four</a> </li> 
       <li> <a href="#">Sub Five</a> </li> 
      </ul> 
      <ul> 
       <li> <a href="#">Sub Six</a> </li> 
       <li> <a href="#">Sub Seven</a> </li> 
       <li> <a href="#">Sub Eight</a> </li> 
       <li> <a href="#">Sub Nine</a> </li> 
       <li> <a href="#">Sub Ten</a> </li> 
      </ul> 
      <ul> 
       <li> <a href="#">Sub Six</a> </li> 
       <li> <a href="#">Sub Seven</a> </li> 
       <li> <a href="#">Sub Eight</a> </li> 
       <li> <a href="#">Sub Nine</a> </li> 
       <li> <a href="#">Sub Ten</a> </li> 
      </ul> 
     </div> </li> 
   </ul> 
  </nav>  
 </body>
</html>

Related Tutorials