css - 在悬停时添加 css 菜单下拉时，模板上会产生大量可用空间

Question

当尝试在悬停“下拉菜单”的菜单上添加一个包含内容的框时，它会执行如下操作:

_{(来源:gyazo.com)}

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

这是我使用的代码:

       <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 的 child (只有菜单的链接)。这样我们就可以设置我们想要将哪些样式应用于所有链接以及哪些应用于菜单的链接:

<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");
}