新生练习html 菜单

丿狂奔兔

于 2014-04-12 17:33:13 发布

阅读量370

点赞数

分类专栏：新生在学习

本文链接：https://blog.csdn.net/u014370861/article/details/23543927

版权

新生在学习专栏收录该内容

3 篇文章 0 订阅

订阅专栏

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
*{
margin: 0;
padding: 0;
}/*重置，说这是偷懒的重置*/
ul{
list-style: none;去/*掉在给个li前面的点*/
}
a{
text-decoration: none;/*去掉链接中的下划线*/
color: #000;
margin-left: 5px;
-webkit-transition: all 1s;/*过渡*/
-moz-transition: all 1s;
-ms-transition: all 1s;
-o-transition: all 1s;
transition: all 1s;
}
li:hover>a{
color: #fff;
}
ul.mane{
width: 700px;
margin:100px auto;/*设置整个东西在页面的位置*/
}
li{
background-color: #ddd;
width: 150px;
line-height: 30px;
}
li:hover{
background-color: #000;
}
ul li.sh{
position: relative;
}
ul li.sh>a::after{
content: "[+]";
position: absolute;
right: 10px;
}
ul li:hover.sh>a::after{
content: "[-]";
color: #fff;
}
.mane .sh .s{
max-height: 0px;
overflow: hidden;
-webkit-transition: all 1s;
-moz-transition: all 1s;
-ms-transition: all 1s;
-o-transition: all 1s;
transition: all 1s;
}
.mane .sh:hover .s{
max-height: 150px;
}
</style>
</head>
<body>
<ul class="mane">
<li class="sh"><a href="#">放上面会如何？</a>
<ul class="s">
<li><a href="#">你</a></li>
<li><a href="#">猜</a></li>
<li><a href="#">啊</a></li>
</ul>
</li>
<li><a href="#">首页</a></li>
</ul>
</body>
</html>