css列表问题_html/css_WEB-ITnose

无需表格的菜单






ul{
width:200px;
color:white;
list-style-type:none;
font-family:Arial;
margin:0px;
padding:0px;

}
li{
background-color: #c11136;
padding:5px 5px 5px 0.5em;
border-left:12px solid #711515;
border-right:1px solid #711515;
border-bottom:1px solid #ED9F9F;

}

body{ background-color:#ffdee0;

}
li:hover{ /* 鼠标经过时 */
background-color:#990020; /* 改变背景色 */
color:#ffff00; /* 改变文字颜色 */
}




Home
My Blog
Friends
Next Station
Contact Me


怎么让运行结果如此图

回复讨论(解决方案)

已经是这样的效果了

学习，接分。。。

不是 你仔细看 每个 的下边框长度不一样

不是 你仔细看 每个 的下边框长度不一样

还真没发现你说的问题

不是 你仔细看 每个 的下边框长度不一样

还真没发现你说的问题

这段代码结果是： 而我想让结果是： 就那几个 下面的边框线长度不一样

浏览器问题，把border-bottom-width的值设大点效果更明显

浏览器问题，把border-bottom-width的值设大点效果更明显

那个我设置过 但太粗了 我想要的不是那个效果 我还有套代码 能实现我说的那个效果

无需表格的菜单



body{
background-color:#ffdee0;
}
#navigation {
width:200px;
font-family:Arial;
}
#navigation ul {
list-style-type:none; /* 不显示项目符号 */
margin:0px;
padding:0px;
}
#navigation li {
border-bottom:1px solid #ED9F9F; /* 添加下划线 */
}
#navigation li a{
display:block; /* 区块显示 */
padding:5px 5px 5px 0.5em;
text-decoration:none;
border-left:12px solid #711515; /* 左边的粗红边 */
border-right:1px solid #711515; /* 右侧阴影 */
}
#navigation li a:link, #navigation li a:visited{
background-color:#c11136;
color:#FFFFFF;
}
#navigation li a:hover{ /* 鼠标经过时 */
background-color:#990020; /* 改变背景色 */
/* 改变文字颜色 */
}

Home
My Blog
Friends
Next Station
Contact Me

查看更多关于css列表问题_html/css_WEB-ITnose的详细内容...