1.html代码
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>stock list webpage</title>
<link rel="stylesheet" type="text/css" href="stocklist.css">
</head>
<body>
<div id="nav">
<ul>
<li class="navli">
<a href="#">news1<div id="angle"></div></a>
<ul>
<li><a href="#">css1</a></li>
<li><a href="#">css2</a></li>
<li><a href="#">css3</a></li>
<li><a href="#">css4</a></li>
<li><a href="#">css5</a></li>
<li><a href="#">css6</a></li>
</ul>
</li>
<li class="navli">
<a href="#">news2</a>
<ul>
<li><a href="#">css1</a></li>
<li><a href="#">css2</a></li>
<li><a href="#">css3</a></li>
<li><a href="#">css4</a></li>
<li><a href="#">css5</a></li>
<li><a href="#">css6</a></li>
</ul>
</li>
</ul>
</div>
</body>
</html>
2.css代码
* {
margin: 0px;
padding: 0px;
text-decoration: none;
}
#nav {
width: 800px;
height: auto;
margin: 50px auto;
}
ul {
list-style: none;
}
.navli, .navli ul li {
width: 100px;
height: 30px;
margin-left: 4px;
background: #eee;
line-height: 30px;
text-align: center;
float: left;
position: relative;
}
.navli a {
color: #000;
}
/* 二级菜单 */
.navli ul {
position: absolute;
top: 30px;
left: -4px;
}
.navli ul li {
background: gray;
}
.navli ul li:first-child {
border-top: 2px solid red;
}
.navli ul li a {
color: #fff;
}
#angle {
width: 0px;
height: 0px;
border-style: solid;
border-width: 4px 4px 0 4px;
border-color: red transparent;
position: absolute;
bottom: 1px;
right: 1px;
}
3. 效果图
说明:(1) 到时候可以添加代码,单击自动展开和隐藏。 (2) 直接用emmet代码写代码。