CSS three level menu - HTML CSS CSS Widget

HTML CSS examples for CSS Widget:Menu

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

Description

CSS three level menu

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 {display: inline;}
ul.third-level-menu::before {
   content: '-';<!--from w  ww  .j  a v a2s.c om-->
   position: relative;
   left: -200px;
   top: 10px;
}
ul::before {
   content: '-';
   position: relative;
   left: 0px;
   top: -20px;
}
.third-level-menu
{
   position: absolute;
   top: 0;
   right: -220px;
   width: 220px;
   list-style: none;
   padding: 0;
   margin: 0;
}
.third-level-menu > li
{
   height: 30px;
   background: #999999;
   display: none;
}
.third-level-menu > li:hover { background: blue; }
.second-level-menu
{
   position: absolute;
   top: 30px;
   left: 0;
   width: 200px;
   list-style: none;
   padding: 0;
   margin: 0;
}
.second-level-menu > li
{
   position: relative;
   height: 30px;
   background: #999999;
   display: none;
}
.second-level-menu > li:hover { background: #CCCCCC; }
.top-level-menu
{
   list-style: none;
   padding: 0;
   margin: 0;
}
.top-level-menu > li
{
   position: relative;
   float: left;
   height: 30px;
   width: 100px;
   background: #999999;
}
.top-level-menu > li:hover { background: #CCCCCC; }
.top-level-menu li:hover > ul >li
{
   display: block;
}
.top-level-menu a 
{
   font: bold 14px Arial;
   color: #00FFFF;
   text-decoration: none;
   padding: 0 0 0 10px;
   display: block;
   line-height: 30px;
}
.top-level-menu a:hover { color: #000000; }


      </style> 
 </head> 
 <body> 
  <ul class="top-level-menu"> 
   <li> <a href="">test</a> 
    <ul class="second-level-menu"> 
     <li> <a href="">test</a> 
      <ul class="third-level-menu"> 
       <li> <a href="">test</a> </li> 
      </ul> </li> 
    </ul> </li> 
   <li>null</li> 
  </ul>  
 </body>
</html>

Related Tutorials