效果图如下：
本人写的是变颜色了，但没有出现效果图上的那种整个一块变颜色，只是li这小块变颜色了
能不能帮我改改
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
*{
margin:0;
padding:0;
}
body{
font-size:14px;
}
.menu{
width:600px;
height:50px;
background-color: #4EAF2A;
border-radius: 5px;
}
.menu ul{
list-style: none;
}
.firstMenu li{
float: left;
text-align: center;
margin-top:10px;
height: 30px;
line-height: 30px;
width:100px;
}
.firstMenu .mainlevel ul{
position: absolute;
display: none;
width:130px;
height:250px;
background-color: #4EAF2A;
}
a{
text-decoration: none;
color:black;
}
.mainlevel:hover ul{
display:block;
}
.firstMenu .mainlevel:hover{
background-color:#8ACD0C ;
}
a:hover{
color:white;
}
</style>
<script src="js/jquery-3.3.1.min.js"></script>
<script>
$(function(){
$(".mainlevel").click(function(){
$(".mainlevel ul li").stop().slideDown(2000);
},function(){
$(".mainlevel ul li").stop().slideUp(2000);
});
});
</script>
</head>
<body>
<div class="menu">
<ul class="firstMenu">
<li class="mainlevel" id="one"><a href="">首页</a></li>
<li class="mainlevel" id="one"><a href="">魅力常德</a>
<ul>
<li><a href="">常德概况</a></li>
<li><a href="">图片常德</a></li>
</ul>
</li>
<li class="mainlevel" id="one"><a href="">人文文化</a>
<ul>
<li><a href="">夹山寺</a></li>
<li><a href="">孤峰塔</a></li>
<li><a href="">常德诗墙</a></li>
<li><a href="">常德丝弘</a></li>
<li><a href="">孟姜女贞烈祠</a></li>
<li><a href="">城头山文化遗址</a></li>
</ul>
</li>
<li class="mainlevel" id="one"><a href="">自然景观</a>
<ul>
<li><a href="">桃花源</a></li>
<li><a href="">柳叶湖</a></li>
<li><a href="">壶瓶山</a></li>
<li><a href="">夷望溪</a></li>
<li><a href="">花岩溪</a></li>
</ul>
</li>
<li class="mainlevel" id="one"><a href="">旅游服务</a>
<ul>
<li><a href="">特产美食</a></li>
<li><a href="">宾馆住宿</a></li>
</ul>
</li>
</ul>
</div>
</body>
</html>
1129
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
