纯CSS竖直菜单

• Home
• Wap
• News
• Maps
• Google Play

简单的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干扰，表现和在本地浏览器看到的不一样，暂时没找到办法，如果有知道的麻烦告知一下！^_^

转载于:https://www.cnblogs.com/yoomin/p/3480823.html