Question

当尝试在悬停＆＃34;下拉菜单＆＃34;上的菜单中添加包含内容的框时，它会执行以下操作：

http://gyazo.com/9d055e63b06c6770cca6382fda7e5d34.png

当我将鼠标悬停在“类别”菜单项上时，我希望下拉菜单弹出。

这是我用过的代码：

       <div class="secondheader">

      <div class="container">

               <div class="span12">

                          <ul class="nav6">

                          <li><a href="#">Home</a></li>

                          <li class="dropdown1"><a href="#">Categories</a> </li>

                          <li><a href="#">Buy</a></li>

                          <li><a href="#">Sell</a></li>

                          <li><a href="#">Forums</a></li>

                          <li><a href="#">Contact</a></li>

                          <li><a href="#">item 1</a></li>

                          <li><a href="#">Forums</a></li>

                          <li><a href="#">Contact</a></li>

                          <li><a href="#">item 1</a></li>

                          </ul>

                          </div>

               </div>

       </div>

</div>

CSS：

.secondheader {
background-image: url("../img/second.png");
width: 100%;
height: 66px;
border-bottom: solid 6px #f0e8ce;
}    

.nav6  {
list-style: none;
font-family: 'Dosis', sans-serif;
float: left
font-size: 20px;
margin-top: 13px;
margin-left: -35px;
}

.nav6  li {
display: inline;
margin: 0px;
font-size: 18px;
font-family: 'Dosis', sans-serif;
float: left;
margin-top: 10px;
}

.nav6 a {
color: #7d7253;
padding-top: 20px;
padding-bottom: 20px;
padding-left: 20px;
padding-right: 20px;
}

.nav6 a:hover {
background-image: url("../img/hoverbg.png");
color: #53410f;
text-decoration: none;
}

我尝试过使用教程但我并不真正了解如何为我的布局制作相同的东西我的意思是它有不同的方式和类别。

Answer 1

你想要http://jsfiddle.net/b76Qc/之类的东西吗？

修改

在您的情况下，子菜单是水平的，因为您使用后代选择器而不是子选择器：

将.nav6 li替换为.nav6>li，将.nav6 li ul替换为.nav6>li>ul

如果你想要完整的代码，请查看我的jsfiddle。

编辑2：

如果您希望每个元素具有不同的背景，

<li class="dropdown1"><a href="#">Categories</a> <ul> <li style="background:red"><a href="#">Buy</a></li> <li style="background:blue"><a href="#">Sell</a></li> <li style="background:green"><a href="#">Forums</a></li> ... </ul> </li>

但是，您可以提供指向您网站的链接而不是图片吗？ http://gyazo.com/35835f003d0d8b776248196632cc1d4a.png中显示的方块很奇怪，但我不知道图像中发生了什么......

编辑3：

你必须改变

.nav6 a { color: #7D7253; padding: 20px; }

进入

.nav6>li>a { padding: 20px; } .nav6 a { color: #7D7253; }

并且

.nav6 a:hover { background-image: url("../img/hoverbg.png"); color: #53410F; text-decoration: none; }

到

.nav6 a:hover { color: #53410F; text-decoration: none; } .nav6 > li > a:hover { background-image: url("../img/hoverbg.png"); }

编辑4：

对不起，我没有解释为什么我告诉你使用>选择器，我以为你知道。

你的HTML是这样的：

<ul class="nav6"> <li><a href="#">Home</a></li> <li class="dropdown1"><a href="#">Categories</a> <ul> <li><a href="#">Buy</a></li> <li><a href="#">Sell</a></li> <li><a href="#">Forums</a></li> <li><a href="#">Contact</a></li> <li><a href="#">item 1</a></li> <li><a href="#">Forums</a></li> <li><a href="#">Contact</a></li> <li><a href="#">item 1</a></li> </ul> </li> </ul>

如果您使用.nav6 a，则该样式将应用于<a>内的所有.nav6。这是后代选择器。

然后，这将应用于菜单的链接和子菜单的链接：

<ul class="nav6">

<li>的 <a href="#">Home</a> </li>

<li class="dropdown1">的 <a href="#">Categories</a>

<ul>

<li>的 <a href="#">Buy</a> </li>

<li>的 <a href="#">Sell</a> </li>

...

</ul>

</li>

</ul>

但是，如果您使用子选择器，例如.nav6>li>a，则该样式仅应用于<li>的子项链接，该.nav6是{{1}的子项（只有菜单的链接）。这样我们就可以设置我们想要应用于所有链接的样式以及菜单链接的样式：

<ul class="nav6">

<li>的 <a href="#">Home</a> </li>

<li class="dropdown1">的 <a href="#">Categories</a>

<ul>

<li><a href="#">Buy</a></li>

<li><a href="#">Sell</a></li>

...

</ul>

</li>

</ul>

编辑5：

要解决背景问题，

变化

.nav6 a:hover { color: #53410F; text-decoration: none; }

到

.nav6>li:hover>a, .nav6 .dropdown1 li:hover>a { color: #53410F; text-decoration: none; }

和

.nav6 > li > a:hover background-image: url("../img/hoverbg.png"); }

到

.nav6>li:hover>a { background-image: url("../img/hoverbg.png"); }

Answer 2

为了向您展示实现这项工作所需的代码量，我在这里设置了一个小例子：http://jsfiddle.net/fS5WV/

我把解释放在css中。

关键在于正确嵌套菜单，并为子菜单提供一个绝对位置，以防止它们将内容推下来。

我希望这是有道理的。如果您需要进一步解释，请随时询问。

在悬停时添加css菜单下拉列表时，它会在模板上创建大量可用空间

2 个答案: