css multi level dropdown menu coding

Question

following code displays drop down menu when mouse product:hover but I want css code for 3 level drop down menu. I am not able to proceed further. I want css and html coding for multilevel drop down menu.

 <!DOCTYPE html>
    <html lang="en">
      <head> <title></title>
        <style type="text/css">
        html, body, div, header, footer, aside, nav, article, section   { margin: 0; padding: 0;}
            header, footer, aside, nav, article, section    { display: block; }
            body            { background: #ece9dd; font:12px Helvetica, Arial, sans-serif; line-height: 18px;}
            h2              { color: #333; }
            a               { color: #337810; }
            p               { margin: 0 0 18px; }
            .moveR { float:right }
            .break { clear:both; margin:10px 0px; }

        /*  navigation { */

        .navigation { background:url(images/grads.png) left -57px repeat-x;
                      height:45px; margin:0px; 
                         padding:0px;  z-index:1000;position:relative; }
      .navigation ul li  { float:left;
                        font-family:Arial,sans-serif;list-style:none; 
                           font-weight:bold; font-size:14px; 
                           border-right:1px solid #919191; }
       .navigation ul li a, .navigation ul li a:visited {
            color:#333; 
            display:block; 
            height:45px; line-height:45px; 
            padding:0 15px; }
        .navigation ul li a:hover, .navigation ul li a:active, .navigation ul li a.selected { 
         background:url(images/grads.png) left -102px repeat-x; color:#FFF } 
         /*End  navigation*/

       /* Submenu items */
         .navigation ul ul {
          display:none; /* Sub menus are hidden by default */
        position:absolute;
          // position:static;
        //top:3.5em;
        left:70px;
        float:left;
        right:auto; /*resets the right:50% on the parent ul */
        width:10em; /* width of the drop-down menus */

    }      

    .navigation ul ul li {
        left:auto;  /*resets the left:50% on the parent li */
        //left:220px;
        margin:0; /* Reset the 1px margin from the top menu */
        clear:left;
        float:left;
        width:100%;
    }
    /*     */
    .navigation ul ul li a,
    .navigation ul li.active li a,
    .navigation ul li:hover ul li a,
    .navigation ul li.hover ul li a { /* This line is required for IE 6 and below */
        font-size:.8em;
        font-weight:normal; /* resets the bold set for the top level menu items */
        background:#FFCC00;
        color:#444;
        line-height:1.4em; /* overwrite line-height value from top menu */
        border-bottom:1px solid #ddd; /* sub menu item horizontal lines */
        float:left;
            width:100%;
    }
    .navigation ul ul li a:hover,
    .navigation li.active ul li a:hover,
    .navigation ul li:hover ul li a:hover,
    .navigation ul li.hover ul li a:hover { /* This line is required for IE 6 and below */
        background:#F9A631; /* Sub menu items background colour */
        color:#fff;
        float:left;
    }

    /* Flip the last submenu so it stays within the page */
    .navigation ul ul.last {
        left:auto; /* reset left:0; value */
        right:0; /* Set right value instead */
    }
    .navigation ul ul.last li {
        float:right;
        position:relative;
        right:.8em;
    }

    /* Make the sub menus appear on hover */
    .navigation ul li:hover ul,
    .navigation ul li.hover ul { /* This line is required for IE 6 and below */
        display:block; /* Show the sub menus */
    }   /* Submenu items */ 

         /*search*/
         .S_field { padding:4px; font-size:12px; border:1px solid #b5b4b4; background:#fbfbfa; width:230px; }
       .S_btn { border:1px solid #f6f6f6; width:70px; color:#FFF; font-size:12px; padding:2px 6px; 
              background:url(images/grads.png) left -147px repeat-x; 
             -moz-border-radius:2px; 
             -webkit-border-radius:2px;
             -khtml-border-radius:2px; border-radius:2px;}
      .S_btn:hover { cursor:pointer }
      .S_btn:active { background:#ff5c02; outline:none; }      /*End search*/





        </style>

      </head>
      <body>
    <!-- Navigation -->
        <div class="navigation">
                        <ul>
                            <li><a href="#" class="active">Home</a></li>
                            <li><a href="#">Products</a>
                                <ul><li><a href="#">Electrical Switchgears</a></li>
                                           <ul><li><a href="#">sub-product</a></li></ul>
                                        <li><a href="#">Product 2</a></li>
                                        <li><a href="#">Product 3</a></li>

                                       <li><a href="#">Link five is a long link that wraps</a></li></ul>
                                </li>
                            <li><a href="profile.html" target="_top">Profile</a></li>
                            <li><a href="contact.html" target="_top">Contact</a></li></ul>

                <div class="moveR">  <!--Search-->
               <div class="break"></div>
                      <form style="margin:0px 15px 0 0; padding:0px;" 
                      action="http://styles.clipbucket.net/search_result.php"
                      name="search" id="search" method="get">
                      <input name="query" id="query" type="text" class="S_field" value="" />
                      <input name="submit" type="submit" class="S_btn" value="Search" />
               </form></div> <!-- Search End -->
            </div>              <!-- END Navigation -->




      </body>
    </html>

Swati Kothari · Accepted Answer · 2012-10-25 19:00:47Z

4

#menu li:hover ul ul, #menu li:hover ul ul ul, #menu li:hover ul ul ul ul{
display:none;
}

#menu li:hover ul, #menu li li:hover ul, #menu li li li:hover ul, #menu li li li li:hover     ul{
display:block;
}

This code is working in my project perfectly

answered Oct 25, 2012 at 19:00

Swati Kothari

662 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Dennis S · Accepted Answer · 2017-03-19 06:28:37Z

0

Though accepted answer is fine, you can abstract menu items (LIs) to shorten the code:

.menuItem:hover > ul {
    display:block
}

And now you have infinite levels of submenus

answered Mar 19, 2017 at 6:28

Dennis S

3454 silver badges13 bronze badges

Collectives™ on Stack Overflow

css multi level dropdown menu coding

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related