CSS CSS file:
Program Code
div file:
Program code
Demo Effect:
html Code <style> #nav {background: #000; font-size:12px; float:left; margin-left:50px;width:250px; padding:50px;} #nav div{margin:8px;} #nav span{display:none; display:block;} #nav a{color: #666; text-decoration:none; display:block;} #nav a:hover{color: #FFFF00; position:relative;} #nav a:hoverspan{display:block;left:-10px;position:absolute;color: #FFff00; border-top:12px solid #ffff00; border-left:4px solid #ffff00; line-height:0px;} </style><div id= "NAV" > <div><ahref= "http://www.zishu.cn" ><span></span> website homepage </a></div> <div><ahref= "http://www.zishu.cn" ><span></span> website Home </a> </div> <div><ahref= "http://www.zishu.cn" ><span></span> website Home </a></div> <div><ahref= "http://www.zishu.cn" ><span></span> website home </a></div> <div> <ahref= "http://www.zishu.cn" ><span></span> website home </a></div> <div><ahref= " http://www.zishu.cn "><span≫</span> website Home </a></div></div>
Chenhuili after the optimization!
HTML code <textarea id="temp43756" rows="8">CSS section: <style>*{margin:0; padding:0;} #nav {width:250px font-size:12px; background: #000;} #nav ul{display:block; list-style-type:none;} #nav li{Display:block;} #nav Li a{padding:0 0 0 10px; width:200px; display:block; color: #666; text-decoration:none;} #nav Li A:link, #nav li a:visited{color: #666;} #nav Li a:hover{padding:0 0 0 8px; border-left:2px solid #FF0000; color: #FFFF00;} </style> structure section: <div id= "NAV" > <ul> <li><a href= "http://www.zishu.cn" > Home </a> </li> <li><a href= "http://www.zishu.cn" > website home </a></li> <li><a href= "http:// www.zishu.cn "> Home </a></li> <li><a href=" http://www.zishu.cn "> site home </a></li > <li><a href= "http://www.zishu.cn" > website home </a></li> <li><a href= "http:// www.zishu.cn "> Home </a></li> </ul></div>
