css 浮动方式实现水平导航栏

ul.nav{float:left;list-style-type: none;margin:0;padding:0;}ul.nav li{float:left;margin-bottom: 1px;background-color: purple;color:white;line-height: 40px;margin-right: 1px;width: 140px;text-align: center;}ul.nav li:hover,ul.nav li:active{background-color: #6DA203;}

<ul class="nav"><li>菜单1</li><li>菜单2</li><li>菜单3</li><li>菜单4</li><li>菜单5</li><li>菜单6</li></ul>

效果图：