本帖最后由 wushaominkk 于 2018-7-10 14:54 编辑
然后偶然看到了这个代码.
就来分享一下喽.
比较开阔思路吧.[HTML] 纯文本查看 复制代码 <!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
menu{
width: 800px;
margin: 10px auto;
}
.ul1 li
{
height: 30px;
line-height: 30px;
width: 120px;
text-align: center;
font-size: 15px;
border: 1px solid white;
background-color: #70c3cd;
list-style: none;
float: left;
}
.ul1 li:hover
{
background-color: #e8e239;
}
.ul1 li a:hover
{
color: #70c3cd;
}
.ul1 li a
{
text-decoration: none;
color: green;
}
.ul2
{
display: none;
}
.ul1 li:hover .ul2
{
display: block;
}
</style>
</head>
<body>
<menu>
<ul class="ul1">
<li>
<a href="">jichagnxiu01</a>
<ul class="ul2">
<li><a href="">jichagnxiu01</a></li>
<li><a href="">jichagnxiu02</a></li>
<li><a href="">jichagnxiu03</a></li>
<li><a href="">jichagnxiu04</a></li>
</ul>
</li>
<li>
<a href="">jichagnxiu02</a>
<ul class="ul2">
<li><a href="">jichagnxiu01</a></li>
<li><a href="">jichagnxiu02</a></li>
<li><a href="">jichagnxiu03</a></li>
<li><a href="">jichagnxiu04</a></li>
</ul>
</li>
<li>
<a href="">jichagnxiu03</a>
<ul class="ul2">
<li><a href="">jichagnxiu01</a></li>
<li><a href="">jichagnxiu02</a></li>
<li><a href="">jichagnxiu03</a></li>
<li><a href="">jichagnxiu04</a></li>
</ul>
</li>
<li>
<a href="">jichagnxiu04</a>
<ul class="ul2">
<li><a href="">jichagnxiu01</a></li>
<li><a href="">jichagnxiu02</a></li>
<li><a href="">jichagnxiu03</a></li>
<li><a href="">jichagnxiu04</a></li>
</ul>
</li>
<li>
<a href="">jichagnxiu05</a>
<ul class="ul2">
<li><a href="">jichagnxiu01</a></li>
<li><a href="">jichagnxiu02</a></li>
<li><a href="">jichagnxiu03</a></li>
<li><a href="">jichagnxiu04</a></li>
</ul>
</li>
</ul>
</menu>
</body>
</html> | 
发表于 2018-7-10 13:10
我也是看了一圈，没找到啥动画效果