Display Sub menu when menu item hovered over (css html) - HTML CSS CSS Widget

HTML CSS examples for CSS Widget:Menu Hover

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

Description

Display Sub menu when menu item hovered over (css html)

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">
* {<!-- w ww .  j av  a2 s.co  m-->
   padding:0;
   margin:0;
}

body {
   font:normal 13px/19px Arial, Helvetica, sans-serif;
   color:Chartreuse;
   padding:21px;
   background-color:yellow;
}

ul, li, ol {
   list-style-type:none;
}

ul#nav-1 {
   width:61%;
   height:47px;
   border:2px solid blue;
}

ul#nav-1 li {
   position:relative;
   display:inline-block;
   *float:left;
   margin-top:17px;
   margin-left:-5px;
}

ul#nav-1 li a {
   padding:23px 14px;
   font-size:15px;
}

ul#nav-1 li:hover a,
ul#nav-1 li a:hover {
   cursor:pointer;
   background-color:pink;
}

ul#nav-1 li ul#sub-menu {
   display:none;
   position:absolute;
   width:201px;
   list-style:none;
   left:0;
   top:20px;
}

ul#nav-1 li:hover ul#sub-menu {
   display:block !important;
}

ul#nav-1 ul#sub-menu li {
   float:none;
   margin:0;
}

ul#nav-1 ul#sub-menu li a {
   border-bottom:2px solid OrangeRed;
   background-color:grey;
   width:201px;
   text-align:left;
   display:block;
   padding:0;
   padding-left:19px;
   padding-top:14px;
   padding-bottom:14px;
   float:left;
   margin:0;
}

ul#nav-1 ul#sub-menu li:hover a {
   background-color:BlueViolet;
   color:Chartreuse;
}
</style> 
 </head> 
 <body> 
  <ul id="nav-1" class="uppercase"> 
   <li> <a href="#">Lorem</a> 
    <ul id="sub-menu"> 
     <li> <a href="#">Lorem ips</a> </li> 
     <li> <a href="#">Lorem ips</a> </li> 
     <li> <a href="#">Lorem ips</a> </li> 
    </ul> </li> 
   <li> <a href="#">Lorem</a> </li> 
   <li> <a href="#">Lorem</a> </li> 
  </ul>  
 </body>
</html>

Related Tutorials