首页 > 代码库 > CSS——关于列表和导航条菜单之垂直菜单制作
CSS——关于列表和导航条菜单之垂直菜单制作
导航条菜单，即左图所示。下面，将一一展开如何制作。
1、首先，制作一个垂直的项目菜单，用<ul><li>标签写出基本内容，然后在样式表里面用margin和padding去掉内外边距，用list-style属性去掉原有的项目符号，插入自己喜欢的项目符号，代码如下：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>列表和导航条</title><style type="text/css"> ul{ padding: 0;margin: 0; list-style: none; } li{
background:url(符号地址.png) no-repeat 0 50%; //这个时候必须写background height: 30px;line-height: 30px; padding-left: 30px; }</style></head><body><ul> <li><a href = "http://www.mamicode.com/#">project1</a></li> <li><a href = "http://www.mamicode.com/#">project2</a></li> <li><a href = "http://www.mamicode.com/#">project3</a></li> <li><a href = "http://www.mamicode.com/#">project4</a></li></ul></body></html>并且可以同时给项目设置喜欢的边框和背景颜色：
li{ background:url(%E9%A1%B9%E7%9B%AE%E7%AC%A6%E5%8F%B7.png) no-repeat 0 50%;//这个时候必须写background height: 30px;line-height: 30px; padding-left: 30px; display: block; width: 70px; background-color: #CCC; border: 1px solid #666; }这个时候，你会发现中间的边框线以为重叠而加粗了，你可以通过去掉下边框解决掉这个问题，然后再给最后一项或第一项加上：
li{ border-bottom:0; }ul #last{ border-bottom: 1px solid #666; }这个时候，垂直导航条的基本样式已经出来了，当然我们还需要：:hover,:focus,:selected状态：
ul li a:hover,ul li a:focus{ color:#000; background-color:#960; }这个时候，既有漂亮样式也有翻转效果的垂直导航菜单就诞生了~~~
CSS——关于列表和导航条菜单之垂直菜单制作
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。