Html 简单下拉框

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

HTML

有人能帮忙吗。

---

谢谢

最好的方法是将

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>

---

只需看看

HTML的格式是否正确。标记不正确。只是提醒您使用访问者的触摸设备将不会体验您的悬停样式。已编辑，现在是否正确。

#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;
}

<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>

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

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