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

我有这个CSS：

示例如下：示例如下：

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来实现这一点

下面是一个示例：

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>

请参阅此链接

类似于

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

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