<style type="text/css"> .menu { list-style:none; padding:10px 0 40px 25px; margin:0; width:25px; background:#FFFFFF; border-right: 1px solid #9A8744; } .menu li {display:block; width:25px; margin-bottom:-29px;} .menu li a {text-decoration:none; color:#fff; font-size:11px; line-height:10px;} .menu li a em {display:block; width:25px; height:29px;background:url(/files/example/105/vertical.gif) left top; font-style:normal;} .menu li a b { display:block; width:15px; padding:0 3px 29px 7px; text-align:center; text-decoration:none; background:url(/files/example/105/vertical.gif) left bottom; color:#fff; font-weight: normal; } .menu li a:hover {border:0; position:relative; z-index:100; cursor:pointer;} .menu li a:hover em {background-position: center top;} .menu li a:hover b {background-position: center bottom; color:#660;} .menu li a.selected, .menu li a:hover.selected {border:0; position:relative; z-index:200; cursor:default;} .menu li a.selected em, .menu li a:hover.selected em {background-position: right top;} .menu li a.selected b,.menu li a:hover.selected b {background-position: right bottom; color:#242;} </style> <title>CSS,垂直菜单,重构,导航菜单</title><ul class="menu"> <li><a href="vertical_tab_two.html?current=one"><em></em><b>H O M E</b></a></li> <li><a href="#" class="selected"><em></em><b>P R O D U C T S</b></a></li> <li><a href="#"><em></em><b>C O N T A C T</b></a></li> <li><a href="#"><em></em><b>S E A R C H</b></a></li> <li><a href="#"><em></em><b>L I N K S</b></a></li> </ul><br><br>----<br><br><a href="http://library.idtcn.com" _fcksavedurl="http://library.idtcn.com" target="_blank">更多效果请访问http://library.idtcn.com</a>