Make horizontal nav with vertical SubMenu and Horizontal SubMenus - HTML CSS CSS Widget

HTML CSS examples for CSS Widget:Menu sub menu

  1. HOME
  2. HTML CSS
  3. CSS Widget
  4. Menu sub menu

Description

Make horizontal nav with vertical SubMenu and Horizontal SubMenus

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.j ava 2  s  .  c  om-->
   height:auto;
   width:auto;
}

#nav ul {
   margin:0px;
   padding:0px;
   list-style-type:none;
}

#nav ul li {
   float:left;
   position:relative;
}

#nav ul li a {
   line-height:31px;
   text-decoration:none;
   text-align:center;
   display:block;
   width:100px;
   height:31px;
   border:solid Chartreuse;
   color:yellow;
   background-color:blue;
   -webkit-transition:all 2s;
   -moz-transition:all 2s;
   -ms-transition:all 2s;
   -o-transition:all 2s;
   transition:all 2s;
}

#nav ul li a:hover {
   background-color:pink;
}

#nav ul li ul {
   position:absolute;
   -webkit-transition:height  2s linear 0s;
   -moz-transition:height  2s linear 0s;
   -ms-transition:height  2s linear 0s;
   -o-transition:height  2s linear 0s;
   transition:height 2s linear 0s;
   height:0px;
   overflow:hidden;
}

#nav ul li:hover ul {
   height:100px;
   -webkit-transition:height 2s linear 0s;
   -moz-transition:height 2s linear 0s;
   -ms-transition:height 2s linear 0s;
   -o-transition:height 2s linear 0s;
   transition:height 2s linear 0s;
}
</style> 
 </head> 
 <body> 
  <nav id="nav"> 
   <ul> 
    <li> <a href="#">Lorem</a> 
     <ul> 
      <li> <a href="#">Lore</a> </li> 
      <li> <a href="#">Lore</a> </li> 
     </ul> </li> 
   </ul> 
  </nav>  
 </body>
</html>

Related Tutorials