这里下划线显示使用的是伪类，用hover属性触发伪类，使其显示下划线
代码如下：
0; border-bottom: 2px solid blue; -webkit-transition: width 0.5s ease-in-out; -moz-transition: width 0.5s ease-in-out; -ms-transition: width 0.5s ease-in-out; -o-transition: width 0.5s ease-in-out; transition: width 0.5s ease-in-out; /* 动画 */
hover触发伪类：
.navContent>p:hover::before{ /* hover触发伪类 */
30px; /* 下划线最长长度 */
}
完整代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
</head>
<body>
<ul class="nav">
<li class="navContent">
<p>水果</p>
<div>
<p>苹果</p>
<p>香蕉</p>
</div>
</li>
<li class="navContent">
<p>蔬菜</p>
<div>
<p>白菜</p>
<p>菠菜</p>
</div>
</li>
<li class="navContent">
<p>肉食</p>
<div>
<p>猪肉</p>
<p>鸡肉</p>
</div>
</li>
</ul>
</body>
</html>
<script>
$('.navContent').on('mouseenter',function(){
$(this).siblings().find('div').css({'display':'none'});
});
$('.navContent>p').on('mouseenter',function(){
$(this).siblings().slideDown();
$(this).siblings().css({'display':'block'});
});
$('ul').on('mouseleave',function(){
$('.navContent div').css({'display':'none'});
});
$('.navContent div p').on('click',function(){ /* 添加点击事件 */
console.log($(this).text());
});
</script>
<style>
ul,li{
list-style-type: none;
}
.nav{
display: flex;
flex-direction: row;
}
.navContent{
100px;
margin-right: 30px;
position: relative;
text-align: center;
}
.navContent>p::before{ /* 伪类 css2用: css3用:: */
content: ''; /* 伪类元素需要加content属性 */
position: absolute;
bottom: 0;
0;
border-bottom: 2px solid blue;
-webkit-transition: width 0.5s ease-in-out;
-moz-transition: width 0.5s ease-in-out;
-ms-transition: width 0.5s ease-in-out;
-o-transition: width 0.5s ease-in-out;
transition: width 0.5s ease-in-out;
}
.navContent>p:hover::before{ /* hover触发伪类 */
30px; /* 下划线最长长度 */
}
.navContent>div{
position: absolute; /* 定位一定要注意 */
display: none;
background-color: #F9F9F9;
100px;
}
.navContent div p:hover{
color: #3ec56c;
}
</style>
如果遇到下拉菜单无法显示的问题，请首先检查外层div是否设置了
overflow:hidden；
我就是因为这个疑惑了很久，这里标注出来，希望大家不要想我一样踩这个纯属浪费时间的坑（我也很无奈啊）。