CSS纵向菜单
代码如下
<!DOCTYPE>
<html>
<head>
<meta charset="utf-8">
<style type="text/css">
/*去掉默认内边距和外边距*/
* {
margin: 0;
padding: 0;
}
/*设置菜单的大小和位置*/
.list1 ul {
width: 150px;
padding: 50px 0 0px 50px;
}
/*去掉项目符号，修改字体并为链接添加间距*/
.list1 li {
list-style: none;
font: 20px "Arial Black", helvetica;
letter-spacing: 2px;
}
/*为项目添加下边框*/
.list1 li {
border-bottom: 2px solid #999;
}
/*使链接填满整个项目*/
.list1 a {
display: block;
text-decoration: none;
padding: 4px 5px;
}
/*悬停高亮*/
.list1 a:hover {
color: #069;
}
</style>
</head>
<body>
<nav class="list1">
<ul>
<li><a href="#">Alternative</a></li>
<li><a href="#">Country</a></li>
<li><a href="#">Jazz</a></li>
<li><a href="#">Rock</a></li>
</ul>
</nav>
</body>
</html>