纯CSS竖直菜单
简单的CSS竖直菜单,以前学习的小练习。
HTML Code:
<div id="menu"> <ul> <li><a href="#">Home</a></li> <li><a href="#">Wap</a></li> <li><a href="#">News</a></li> <li><a href="#">Maps</a></li> <li><a href="#">Google Play</a></li> </ul> </div>
CSS Code:
#menu{width:170px;} #menu ul{list-style-type:none;} #menu li{margin-top:3px;} #menu li a,#menu li a:visited{border-left:7px solid #333333;border-right:7px solid #333333;display:block;padding:5px;text-decoration:none;color:#fff;background-color:#666;} #menu li a:hover{border-left:7px solid #FF0;border-right:7px solid #FF0;font-weight:bold;}
PS:margin和字体颜色应该是受到博客园的CSS干扰,表现和在本地浏览器看到的不一样,暂时没找到办法,如果有知道的麻烦告知一下!^_^