简单下拉框

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

要做到这一点，最好的方法是使用带有.hover()和fadeIn(), .fadeOut()函数的JQuery，但首先你需要知道你的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即可