Question

我有一个带有4个链接的导航栏。 3是直接链接，1应该下拉到3个以上的链接。当我将鼠标悬停在服务链接上时，我正在努力让ul.services重新出现。

HTML

<a href="#" class="services">services</a>
<ul id="drop_down">
<li><a href="#">Profit</a></li>
<li><a href="#">Profit</a></li>
<li><a href="#"">Profit</a></li>
</ul>
<a href="#">about</a>
<a href="#">contact</a>
<a href="#">testimonials</a>

CSS

#drop_down{
display: none;
position: absolute;
list-style-type: none;
text-align: right;
margin-left: 0;
padding-left: 0;
}
a:hover{
color: red;
}
.services:hover > #drop_down{
display: block;
}

任何人都可以提供帮助。感谢

Answer 1

最好的方法是将JQuery与.hover()和fadeIn(), .fadeOut()函数一起使用，但首先您需要知道的是您的HTML代码有很多错误。

HTML更正：

<a href="#" class="services">services</a>
<ul id="drop_down">
    <li><a href="#">Profit</a></li>
    <li><a href="#">Profit</a></li>
    <li><a href="#">Profit</a></li>
</ul>
<a href="#">about</a>
<a href="#">contact</a>
<a href="#">testimonials</a>

JQuery代码：

$("ul").css("display","none");

$(".services").hover(function(){
    $("ul").fadeIn();
},function(){
    $("ul").hover(function(){},function(){
        $("ul").fadeOut();
    });    
});

只需查看fiddle

即可

简单的下拉框

1 个答案: