Menu at different level visible simultaneously in CSS

Question

I have this CSS:

Here is the example: Here is the example: http://jsfiddle.net/GrkkW/1/

#menu{
width:952px;
height:36px;
line-height:36px;
padding:0 0 0 32px;
background-image:url(/images/menu_bg.gif);
background-position:top left;
background-repeat:repeat-x;
     position:relative;
 z-index:100;
float:left;
}
#menu li{
display:inline;
list-style-type:none;
float:left;
     position:relative;
 z-index:100;
}
#menu li a{
font-family:Tahoma;
font-size:11px;
color:black;
text-decoration:none;
margin:0 15px;
padding:3px 8px;
display: block;
}
#menu li > ul
{
    display: none;
    line-height: 20px;
    height: 20px;
}
#menu li:hover ul{
   display: block;
   position:absolute;
   margin: -5px ;
}
#menu li:hover li{
   float: none; }
#menu li:hover li a{
   background-color: #0C325F;
   border-bottom: 1px solid #0C325F;
   color: #D2DEEC; }
#menu li li a:hover {
   background-color: #8db3ff; }

and HTML is this:

        <ul id="menu">
            <li><a href="#">Home</a></li>
            <li><a href="#">Item1</a>
                <ul>
                    <li><a href="#">SubItem1</a>
                    <ul>
                        <li><a href="#">Sub1</a></li>
                        <li><a href="#">Sub2</a></li>
                     </ul>
                    </li>
                    <li><a href="">SubItem2</a>
                                                <ul>
                        <li><a href="#">Sub1</a></li>
                        <li><a href="#">Sub2</a></li>
                     </ul>
                    </li>

                </ul>
            </li>
            <li><a href="LogForm.aspx">Item2</a></li>

I'm using this to display a menu and submenu. What I want to achieve is that when an option from the second level is clicked then its submenu is visible. However currently when I click on menu, submenu at level 1 and level 2 are displayed simultaneously. I'm wondering if somebody can help me with this and give some advise of the modifications I need to add to the CSS to achieve this?

Here is the example: http://jsfiddle.net/GrkkW/1/

similar to http://stackoverflow.com/questions/13328091/how-to-make-a-menu-have-submenus-in-pure-css — NoobEditor, Nov 15 '13 at 12:13

score 1 · Accepted Answer · answered Nov 15 '13 at 12:00

html

 <ul>
        <li><a href="#">Home</a></li>
        <li><a href="#">About</a>
                <ul>
                <li><a href="#">About-1</a></li>
                <li><a href="#">About-1</a></li>
                <li><a href="#">About-1</a>
                    <ul>
                        <li><a href="#">About-2</a></li>
                        <li><a href="#">About-2</a></li>
                        <li><a href="#">About-2</a>
                            <ul>
                                <li><a href="#">About-3</a></li>
                                <li><a href="#">About-3</a></li>
                                <li><a href="#">About-3</a>
                                    <ul>
                                        <li><a href="#">About-4</a></li>
                                        <li><a href="#">About-4</a></li>
                                        <li><a href="#">About-4</a></li>
                                        <li><a href="#">About-4</a></li>
                                    </ul>
                                </li>
                                <li><a href="#">About-3</a></li>
                            </ul>
                        </li>
                        <li><a href="#">About-2</a></li>
                    </ul>
                </li>
                <li><a href="#">About-1</a></li>
            </ul>
         </li>
        <li><a href="#">profile</a></li>
        <li><a href="#">Contact</a>
            <ul>
                <li><a href="#">contact-1</a></li>
                <li><a href="#">contact-1</a></li>
                <li><a href="#">contact-1</a></li>
                <li><a href="#">contact-1</a></li>
            </ul>
         </li>
    </ul>

css

*{ padding:0px; margin:0px;}
ul{padding:0px; margin:0px; list-style:none; width:100%}
ul li{ float:left; padding-right:1px; position:relative;}
ul a{ text-decoration:none; display:table-cell; vertical-align:middle; text-align:center; color:#000; height:30px;
 width:100px; background-color:#0CF; color:#fff;}
ul a:hover{ background-color:#36C;}
li > ul{ display:none; position:absolute; left:0px; top:100%;}
li:hover > ul{ display:block;}
li > ul li { padding:0px; padding-right:1px; padding-top:1px;}
li > ul li > ul{ top:0px; left:100%; padding-left:1px;}
li > ul li > ul li{width:100px;}

see this link http://jsfiddle.net/bipin_kumar/DjvZ8/7/

Menu at different level visible simultaneously in CSS

1 Answers1