html - 不同级别的菜单在 CSS 中同时可见

Question

我有这个 CSS:

示例如下:示例如下: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; }

HTML 是这样的:

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

我用它来显示菜单和子菜单。我想要实现的是，当单击第二级的选项时，它的子菜单是可见的。但是目前，当我单击菜单时，会同时显示 1 级和 2 级的子菜单。我想知道是否有人可以帮助我解决这个问题并就我需要添加到 CSS 中的修改提出一些建议以实现此目的？

示例如下:http://jsfiddle.net/GrkkW/1/

Answer 1

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;}

查看此链接 http://jsfiddle.net/bipin_kumar/DjvZ8/7/