CSS Navigation and dropdown item Highlighting

Description

Demo Code

<html>
 <head> 
  <meta name="viewport" content="width=device-width, initial-scale=1"> 
  <style id="compiled-css" type="text/css">
#menu<!--from  w w  w . ja  v a2  s  .c o  m-->
 {
   margin:11px;
   display:inline-block;
   list-style-type:none;
}

#menu ul
 {
   list-style:none;
   position:relative;
   margin:0;
   padding:0
}

#menu ul a
 {
   display:block;
   color:Chartreuse;
   text-decoration:none;
   font-size:16px;
   line-height:33px;
   padding:0 16px;
   font-family:arial, verdana, sans-serif;
}

#menu ul a:hover
 {
   color:yellow;
}

#menu ul a:active
 {
   color:blue;
}

#menu ul li
 {
   position:relative;
   float:left;
   margin:0;
   padding:0
}

#menu ul li.current-menu-item
 {
   background:pink;
   color:OrangeRed;
}

#menu ul li:hover
 {
   background:grey;
   color:BlueViolet;
}

#menu ul ul
 {
   display:none;
   position:absolute;
   color:Chartreuse;
   top:100%;
   left:0;
   background:yellow;
   padding:0
}

#menu ul ul li
 {
   float:none;
   color:blue;
   width:201px
}

#menu ul ul a
 {
   line-height:121%;
   color:pink;
   border-top:5px solid OrangeRed;
   border-bottom:5px solid grey;
   border-right:5px solid BlueViolet;
   border-left:5px solid Chartreuse;
   background:yellow;
   padding:11px 16px
}

#menu ul ul a:active
 {
   line-height:121%;
   color:blue;
   background:pink;
   padding:11px 16px
}

#menu ul ul a:hover
 {
   line-height:121%;
   color:OrangeRed;
   background:grey;
   padding:11px 16px
}

#menu ul ul ul
 {
   top:0;
   left:100%
}

#menu ul li:hover>ul
 {
   display:block;
   color:BlueViolet;
}

#menu ul li:hover a {
   color:Chartreuse;
}
</style> 
 </head> 
 <body> 
  <div id="menu"> 
   <ul> 
    <li class="current-MENU -item"> <a href="#">Lorem</a> </li> 
    <li> <a href="#">Lorem </a> 
     <ul> 
      <li> <a href="#">Lorem ipsu</a> </li> 
      <li> <a href="#">Lorem ipsu</a> </li> 
      <li> <a href="#">Lorem ipsu</a> </li> 
     </ul> </li> 
    <li> <a href="#">Lorem </a> 
     <ul> 
      <li> <a href="#">Lorem ipsu</a> </li> 
      <li> <a href="#">Lorem ipsu</a> </li> 
     </ul> </li> 
    <li> <a href="#">Lorem </a> </li> 
    <li> <a href="#">Lorem </a> </li> 
   </ul> 
  </div>  
 </body>
</html>
CSS Navigation and dropdown item Highlighting - HTML CSS CSS Widget

Description

Demo Code

Related Tutorials
