菜单垂直
ul
{
padding: 0;
width: 200px; //否则下面border bottom会过长
list-style: none;
border-bottom: 1px dashed #666;
}
ul a {
display: block; //使链接充满整行,方便点击,否则直接移到链接文字出才能点击
border: 1px dashed #666;
border-bottom: none;//解决bottom border double的问题
zoom: 1; //解决ie bug:li之间有空隙
}
菜单水平
ul
{
padding: 0;
list-style: none;
overflow: hidden; //因为li float,容器看不到float的元素,所以做容器强制expand,否则其不知道边界,可用clearfix代替,用border-top or bottom可以验证
zoom: 1; //ie专用
border-left: 1px dashed #666;//详情请看ul li border-left行
}
ul li {
float: left;
width: 150px;
border: 1px dashed #666;
border-left: none;//解决left border double问题,由容器ul补最左边的border
}