CSS hover menu keeping hovered menu item to hovered state - HTML CSS CSS Widget

HTML CSS examples for CSS Widget:Menu Hover

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

Description

CSS hover menu keeping hovered menu item to hovered state

Demo Code

ResultView the demo in separate window 

<html>
 <head> 
  <title>Lorem ipsum dolo</title> 
  <meta name="viewport" content="width=device-width, initial-scale=1"> 
  <style id="compiled-css" type="text/css">
#nav-menu>li {
   background:orange;
   float:left;
   padding:11px;
   border:2px solid Chartreuse;
}

#nav-menu>li:hover a {
   background:red;
   padding:3px;
   display:inline;
}

#nav-menu>li ul {
   display:none;
   position:absolute;
}

#nav-menu>li:hover ul {
   display:block;
   margin-left:6px;
}

#nav-menu>li:hover ul li {
   background:blue;
}

#nav-menu>li:hover ul li:hover {
   background:green;
}
</style> <!--from  www  .  j ava 2s .c  o m-->
 </head> 
 <body> 
  <ul id="nav-menu"> 
   <li> <a>Lorem i</a> 
    <ul> 
     <li>Lorem ipsum do</li> 
     <li>Lorem ipsum dolo</li> 
     <li>Lorem ipsum dolor</li> 
    </ul> </li> 
   <li> <a>Lorem</a> </li> 
  </ul>  
 </body>
</html>

Related Tutorials