CSS multi-level menu - HTML CSS CSS Widget

Description

CSS multi-level menu
Demo Code

<html>
 <head> 
  <meta name="viewport" content="width=device-width, initial-scale=1"> 
  <style id="compiled-css" type="text/css">
.menu ul,
.menu li,
.menu span,
.menu a {
   margin:0;
   padding:0;
   position:relative;
}

.menu {<!--   w  ww .  j a  v  a  2 s  .  c om-->
   height:50px;
   background:Chartreuse;
}

.menu li.active {
   background:red;
}

.menu li:hover {
   background:red;
}

.menu li li ul li a:hover {
   background:red;
}

.menu li ul li:hover>a {
   background:red;
}

.menu a {
   color:yellow;
   font-family:Helvetica, Arial, Verdana, sans-serif;
   font-size:12px;
   line-height:50px;
   padding:0 21px;
   text-decoration:none;
}

.menu ul {
   list-style:none;
}

.menu>ul>li {
   float:left;
}

.menu li:hover>ul {
   display:block;
}

.menu li ul {
   display:none;
   position:absolute;
   width:201px;
   top:100%;
   left:0;
}

.menu li ul li a {
   background:blue;
   display:block;
}

.menu li li ul {
   display:none;
   position:absolute;
   left:100%;
   top:0;
}
</style> 
 </head> 
 <body> 
  <div class="menu"> 
   <ul> 
    <li> <a href="#">Lorem </a> </li> 
    <li> <a href="#">Lorem </a> 
     <ul> 
      <li> <a href="#">Lorem ipsu</a> 
       <ul> 
        <li> <a href="#">L</a> 
         <ul> 
          <li> <a href="#">L</a> </li> 
         </ul> </li> 
       </ul> </li> 
      <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> </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> 
      <li> <a href="#">Lorem ipsu</a> </li> 
     </ul> </li> 
    <li> <a href="#">Lorem </a> </li> 
   </ul> 
  </div>  
 </body>
</html>
CSS multi-level menu - HTML CSS CSS Widget

Description

Demo Code

Related Tutorials
