垂直菜单：
<style type="text/css"> *{ margin: 0; padding: 0; } ul{ list-style: none; width: 100px; background-color: aliceblue; } a{ text-decoration: none; display: block; width: 100px; height: 30px; line-height: 30px; background-color: aqua; margin-bottom: 5px; padding-left: 20px; } a:hover{ background-color: yellow; color: red; } </style> </head> <body> <ul> <li><a href="#">华语</a></li> <li><a href="#">民谣</a></li> <li><a href="#">金属</a></li> <li><a href="#">流行</a></li> <li><a href="#">摇滚</a></li> </ul> </body>
菜单通常可以用列表来制作，在li标签中加入a标签，把a标签变成块级标签，这样就可以对其设定宽高。
水平菜单栏
只需要把无序列表加一个float：left向左浮动，同时把ul的宽取消；
原文：http://www.cnblogs.com/xiandong/p/7617511.html
