我正在尝试在http://jsfiddle.net/hozey/9dGuc/处向css添加一个子菜单，但似乎无法掌握它。有人可以帮助这个新手吗？这是html。我想为马1,2和3做一个子菜单。
<div class="menu">
<ul>
<!--begin to insert contents-->
<li class="item-first"><a href="http://www.lawsart.com" target="_top">Home</a></li>
<li><a class="current">Portfolio ▼</a>
<ul>
<li><a href="http://www.lawsart.com/Horses1.html" target="_top">Horses 1</a></li>
<li><a href="http://www.lawsart.com/Horses2.html" target="_top">Horses 2</a></li>
<li><a href="http://www.lawsart.com/Horses3.html" target="_top">Horses 3</a></li>
<li><a href="http://www.lawsart.com/Dogs.html" target="_top">Dogs</a></li>
<li><a href="http://www.lawsart.com/People.html" target="_top">People</a></li>
<li><a href="http://www.lawsart.com/Stills.html" target="_top">Stills</a></li>
</ul>
</li>
<li><a href="http://www.lawsart.com/Order.html" target="_top">Order</a></li>
<li><a href="http://www.lawsart.com/Contact.html" target="_top">Contact Me</a></li>
</ul>
</div> <!-- end menu -->
</div>
这是我到目前为止的css：
body {
margin: 0px;
}
#wrapper {
border: px solid black;
margin: 1em auto;
font-family: Arial,Helvetica,sans-serif;
width: 760px;
text-align: left;
background-color: #cccccc;
overflow:hidden;
height:150px;
}
.menu {font-family: arial, sans-serif;width:760px;position:relative;font-size:0.7em; margin:0px auto;}
.menu ul li a {display:block;
text-decoration:none;
width:97px;
height:25px;
text-align:center;
color:white;
padding-left:1x;
border:px solid;
border-width:0 0px 0px 0;
background:;
line-height:25px;
font-size:1.0em;}
.menu ul {padding:0;margin:0;list-style-type: none; }
.menu ul li {float:left;position:relative;}
.menu ul li ul {visibility:hidden;position:absolute;}
.menu ul li:hover a, .menu ul li a:hover {color:white;background:#3BA110;}
.menu ul li:hover ul, .menu ul li a:hover ul {visibility:visible;left:0;}
.menu ul li:hover ul li a, .menu ul li a:hover ul li a {display:block;
background:#444444;
color:white;
width:97px;
padding-left:1px;
border-right:none;}
.menu ul li:hover ul li a:hover, .menu ul li a:hover ul li a:hover {background:#3BA110;color:white;}
答案 0 :(得分：4)
This will get you started，虽然远非完美。正如Zeta指出的那样without the child combinator，制作一个深层嵌套的菜单不仅困难，而且还会导致代码错误。
您需要做的是确保完全您的每个选择器所针对的内容。您希望第二层和第三层li的行为不同，因此您需要确定第二层的选择器不会影响第三层。
我为解决你的问题所做的一切都是在你已经拥有的代码上应用了所有地方的子组合器，因为我知道你正在编写第一层和第二层菜单项的代码。之后，我添加了一个简单的选择器来定位第三层项目，并有一个工作菜单。
如果我是你，我会回顾你的代码并确保你确切知道你的选择器的目标，然后重写你的CSS。这样做并不难，而且对于非常复杂的嵌套菜单，它可能会产生极少的代码。
...
<!-- the rest of the menu -->
<li>
<a href="http://www.lawsart.com/Horses1.html" target="_top">Horses 1</a>
<ul>
<li>Submenu1</li>
<li>Submenu2</li>
</ul>
</li>
<!-- the rest of the menu -->
...
.menu ul ul ul { visibility: hidden; position: absolute; top: 0; left: 97px; }
.menu ul ul li:hover ul { visibility: visible; background-color: #eee; }
仅举几个例子来说明如何选择不同的层菜单和项目：
.menu > ul > li { }
.menu > ul > li > ul { }
.menu > ul > li > ul > li { }
.menu ul ul > li { } /* This will also target submenu items */
.menu > ul > ul > li { }
.menu > ul > li > ul > li > ul { }
.menu ul ul ul { }
.menu > ul > li > ul > li > ul > li { }
.menu ul ul ul li { }
我们从上面的代码中可以收集到的是，在您处于菜单的最后一层之前，您不想停止使用子组合器。通常，menu ul[n] li，我使用伪代码来表示 n 的ul个数，将比更深的目标 li 菜单中的深度。所以在你的情况下，使用.menu ul ul ul li是好的，因为第三层是最后一层。但是你不想使用.menu ul ul li来编写仅适用于第一个下拉列表的样式，因为该选择器也会针对第三个，第四个等深度目标。
为了完整起见，通过以下方式思考，完成了深入嵌套菜单的最低要求：
你想要在第一个 ul 之后的任何内容开始隐藏。所以你可以这样做：
.menu ul ul { visibility: hidden; }
这会隐藏嵌套在另一个 ul 中的任何 ul 。所以它击中了我们所有的子菜单。它只适用于我们菜单中的列表。
然后，当您将鼠标悬停在其父链接上时，您希望每个子菜单都可见。我认为我们可以使用单个选择器处理所有子菜单：
.menu li:hover > ul { visibility: visible; }
这应该足够通用，以适用于菜单的每个级别。从右向左阅读，当我们将鼠标悬停在直接父母的 li 上时，我们会将 ul 显示出来。而且，和往常一样，这仅适用于我们菜单中的 li 。
当然，如果您愿意，也可以使用 a 。
CSS菜单是思考和了解CSS efficiency的好时机。一旦你有一个工作菜单，看看你是否可以优化它！我在这里发布的标签可能不是最快的;我只是想到了他们。我会留给你找到最好的选择器。
这就是复杂嵌套CSS菜单的基础知识。希望它有所帮助。