Hide lists and show it when mouse is on the upper one - HTML CSS CSS Widget

HTML CSS examples for CSS Widget:UL Element

  1. HOME
  2. HTML CSS
  3. CSS Widget
  4. UL Element

Description

Hide lists and show it when mouse is on the upper one

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">
ul {<!--from  w  ww.ja v  a  2  s  . c  o m-->
   width:7em;
}

ul ul {
   display:none;
   background-color:Chartreuse;
}

li {
   position:relative;
}

li:hover {
   background-color:yellow;
}

li li:hover,
li:hover li:hover {
   background-color:blue;
}

ul li:hover ul {
   display:block;
   position:absolute;
   top:0;
   left:100%;
}
</style> 
 </head> 
 <body> 
  <ul> 
   <li>Lore</li> 
   <li>Lorem ipsu 
    <ul> 
     <li>Lorem ips</li> 
     <li>Lorem ips</li> 
    </ul> </li> 
   <li>Lorem </li> 
   <li>Lorem </li> 
  </ul>  
 </body>
</html>

Related Tutorials