3 level CSS drop down menu with vertical alignment - HTML CSS CSS Widget

HTML CSS examples for CSS Widget:Menu Dropdown

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

Description

3 level CSS drop down menu with vertical alignment

Demo Code

ResultView the demo in separate window 

<html>
   <head> 
      <style type="text/css">
#menu{<!--from  w  ww  .j ava2  s  . c  om-->
   margin:3px;
}
#menu > li{            /* Top Level */
float:left;
margin-right:3px;
list-style:none;
}
#menu > li > span{
display:block;
background:red;
padding:3px 10px;
}
#menu > li:hover > span{
color:#fff;
}
#menu > li > ul{        /* Second Level */
display:none;
background:#08a;
}
#menu > li:hover > ul{
display:block;
position:absolute;
list-style:none;
}
#menu > li > ul > li > span{
display:block;
padding:3px 10px;
border-top:solid 3px #fff;
}
#menu > li > ul > li:hover > span{
color:#fff;
}
#menu > li > ul li > ul{   /* Third Level & beyond */
display:none;
background:blue;
}
#menu > li > ul li:hover > ul{
display:block;
position:absolute;
left:100%;
border-left:solid 3px #fff;
width:auto;
}
#menu > li > ul > li ul > li{
display:block;
padding:3px 10px;
border-top:solid 3px #fff;
white-space:nowrap;
}
#menu > li > ul > li ul > li:hover > span{
color:#fff;
}

      </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