css - 尝试将子菜单添加到 css

Question

我正在尝试向 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 &#9660;</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;}

Answer 1

This will get you started ，尽管它远非完美。正如 Zeta 指出的那样，without the child combinator , 制作一个深度嵌套的菜单不仅困难，而且还会导致错误的代码。

您需要做的是确保您确切知道每个选择器的目标。你想要你的二线和三线li s 的行为有所不同，因此您需要确定第二个选择器不会影响第三个。

从字面上看，我为解决您的问题所做的全部工作就是在您已有的代码上到处应用子组合器，因为我知道您正在为第一层和第二层菜单项编写代码。之后，我添加了一个简单的选择器来定位第三层元素并获得了一个工作菜单。

如果我是你，我会回顾你的代码并确保你确切地知道你的选择器的目标是什么，然后重写你的 CSS。这并不难做到，而且对于非常复杂的嵌套菜单来说，代码量惊人地少。

html(仅用于第三层菜单项)

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

css(仅用于第三层)

.menu ul ul ul { visibility: hidden; position: absolute; top: 0; left: 97px; }
.menu ul ul li:hover ul { visibility: visible; background-color: #eee; }

仅举几个如何选择不同层级菜单和元素的示例:

css(针对“标题项”)

.menu > ul > li { }

css(针对第一个下拉菜单)

.menu > ul > li > ul { }

css(针对第一个下拉项)

.menu > ul > li > ul > li { }
.menu ul ul > li { } /* This will also target submenu items */
.menu > ul > ul > li { }

css(将子菜单定位到下拉项)

.menu > ul > li > ul > li > ul { }
.menu ul ul ul { }

css(定位下拉项的子菜单项)

.menu > ul > li > ul > li > ul > li { }
.menu ul ul ul li { }

我们可以从上面的代码中了解到，您不想在到达菜单的最后一层之前停止使用子组合器。一般来说，menu ul[n] li ，其中我使用伪代码表示 n 个 ul s，将针对菜单中任何 li 深度超过 n 的深度。所以在你的情况下，可以使用 .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 菜单的基础知识。希望对您有所帮助。