0

我正在尝试在http://jsfiddle.net/hozey/9dGuc/向 css 添加子菜单,但似乎无法掌握它。有人可以帮助这个新手吗?这是html。我想为 Horses 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;}
4

1 回答 1

5

这将使您入门,尽管它远非完美。正如 Zeta 所指出的,如果没有子组合器,制作深度嵌套的菜单不仅很困难,而且还会导致糟糕的代码。

您需要做的是确保您确切知道每个选择器的目标是什么。您希望您的第二层和第三层li的行为不同,因此您需要确定第二层的选择器不会影响第三层。

从字面上看,我为解决您的问题所做的所有事情都是在您已经拥有的代码上的所有地方应用子组合器,因为我知道您正在为第一层和第二层菜单项编写代码。在那之后,我添加了一个简单的选择器来定位第三层项目,并有一个工作菜单。

如果我是你,我会回顾你的代码并确保你确切地知道你的选择器的目标是什么,然后重写你的 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在我使用伪代码表示nuls 的地方,将针对菜单中任何比n深度更深的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 效率的好时机。一旦你有一个工作菜单,看看你是否可以优化它!我在这里发布的标签可能不是最快的;我只是从头顶想到它们。我会留给你找到最好的选择器来使用。

这就是复杂嵌套 CSS 菜单的基础。希望能帮助到你。

于 2013-01-10T14:32:25.943 回答