0

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


（来源：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;
}

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

4

2 回答 2

0

你想要类似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>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>

编辑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");
}
于 2012-08-19T16:08:09.970 回答
0

为了向您展示完成这项工作实际上需要多少代码，我在这里设置了一个小示例：http: //jsfiddle.net/fS5WV/

我把解释放在css中。

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

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

于 2012-08-19T16:27:04.243 回答