效果
代码
<html><head><title>无需表格的菜单</title><style>body{background-color:#dee0ff;}#navigation {width:150px;font-family:Arial;font-size:14px;text-align:right}#navigation ul {list-style-type:none;/* 不显示项目符号 */margin:0px;padding:0px;}#navigation li {border-bottom:1px solid #9F9FED; /* 添加下划线 */}#navigation li a{display:block;height:1em;padding:5px 5px 5px 0.5em;text-decoration:none;border-left:12px solid #151571; /* 左边的粗边 */border-right:1px solid #151571; /* 右侧阴影 */}#navigation li a:link, #navigation li a:visited{background-color:#1136c1;color:#FFFFFF;}#navigation li a:hover{/* 鼠标经过时 */background-color:#002099; /* 改变背景色 */color:#ffff00; /* 改变文字颜色 */border-left:12px solid yellow;}</style></head><body><div id="navigation"><ul><li><a href="#">Home</a></li><li><a href="#">Contact us</a></li><li><a href="#">Web Dev</a></li><li><a href="#">Web Design</a></li><li><a href="#">Map</a></li></ul></div></body></html>
改造一下
li加一个float属性
<html><head><title>无需表格的菜单</title><style>body{background-color:#dee0ff;}#navigation {/*width:150px;*/font-family:Arial;font-size:14px;text-align:right}#navigation ul {list-style-type:none;/* 不显示项目符号 */margin:0px;padding:0px;}#navigation li {border-bottom:1px solid #9F9FED; /* 添加下划线 */float:left;}#navigation li a{width: 120px;display:block;height:1em;padding:5px 5px 5px 0.5em;text-decoration:none;border-left:12px solid #151571; /* 左边的粗边 */border-right:1px solid #151571; /* 右侧阴影 */}#navigation li a:link, #navigation li a:visited{background-color:#1136c1;color:#FFFFFF;}#navigation li a:hover{/* 鼠标经过时 */background-color:#002099; /* 改变背景色 */color:#ffff00; /* 改变文字颜色 */border-left:12px solid yellow;}</style></head><body><div id="navigation"><ul><li><a href="#">Home</a></li><li><a href="#">Contact us</a></li><li><a href="#">Web Dev</a></li><li><a href="#">Web Design</a></li><li><a href="#">Map</a></li></ul></div></body></html>
效果
