Make three level drop down menu with 3rd level in CSS - HTML CSS CSS Widget

HTML CSS examples for CSS Widget:Menu Dropdown

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

Description

Make three level drop down menu with 3rd level in CSS

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">
* {<!--   w w  w.  j  ava2 s. com-->
   list-style:none;
   margin:0;
   padding:0;
   font-size:2em;
   cursor:pointer;
}

#menu {
   margin:4px;
}

#menu>li {
   float:left;
   margin-right:4px;
}

#menu>li>span {
   display:block;
   background:Chartreuse;
   padding:4px 11px;
}

#menu>li:hover>span {
   color:yellow;
}

#menu>li>ul {
   display:none;
   background:blue;
}

#menu>li:hover>ul {
   display:block;
   position:absolute;
}

#menu>li>ul>li>span {
   display:block;
   padding:4px 11px;
   border-top:4px solid pink;
}

#menu>li>ul>li:hover>span {
   color:WhiteSmoke;
}

#menu>li>ul li>ul {
   display:none;
   background:OrangeRed;
}

#menu>li>ul li:hover>ul {
   display:block;
   position:absolute;
   left:100%;
   border-left:4px solid grey;
   width:auto;
}

#menu>li>ul>li ul>li {
   display:block;
   padding:4px 11px;
   border-top:4px solid BlueViolet;
   white-space:nowrap;
}

#menu>li>ul>li ul>li:hover>span {
   color:Chartreuse;
}
</style> 
  <script type="text/javascript">

      </script> 
 </head> 
 <body> 
  <ul id="menu"> 
   <li> <span>Level 1-A</span> 
    <ul> 
     <li> <span>Level 2-A-1</span> 
      <ul> 
       <li> <span>Level 3-A-1</span> 
        <ul> 
         <li> <span>Level 4-A-1</span> 
          <ul> 
           <li> <span>Level 5-A-1</span> </li> 
          </ul> </li> 
         <li> <span>Level 4-A-2</span> </li> 
        </ul> </li> 
       <li> <span>Level 3-A-2</span> </li> 
       <li> <span>Level 3-A-3</span> </li> 
      </ul> </li> 
     <li> <span>Level 2-A-2</span> </li> 
     <li> <span>Level 2-A-3</span> </li> 
     <li> 
      <ul> 
       <li> <span>Foo</span> </li> 
       <li> <span>Bar</span> </li> 
      </ul> <span>Level 2-A-4</span> </li> 
    </ul> </li> 
   <li> <span>Level 1-B</span> </li> 
   <li> <span>Level 1-C</span> </li> 
   <li> <span>Level 1-D</span> </li> 
   <li> <span>Level 1-E</span> </li> 
  </ul>  
 </body>
</html>

Related Tutorials