|
程序代码
友情提示：全选代码复制运行，您也可以先修改部分代码再运行查看效果 。
<style> CSS部分：#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:hover span{display:block;left:-10px;position:absolute;color:#FFff00;border-top: 12px solid #ffff00;border-left:4px solid #ffff00;line-height:0px;} </style> <style> *{ margin: 0; padding: 0; } #nav{ width: 250px; font-size: 12px; background: #f60; } #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: #cccc00; } </style> 结构部分： <div id="nav"> <ul> <li><a href="http://www.admin5.com">网站首页</a></li> <li><a href="http://www.admin5.com">站长资讯</a></li> <li><a href="http://www.admin5.com">网页设计</a></li> <li><a href="http://www.admin5.com">网站欣赏</a></li> <li><a href="http://www.admin5.com">站长学习乐园</a></li> <li><a href="http://www.admin5.com">admin5欢迎您</a></li> </ul> </div> |
声明：本站教程文章版权为一起Ext(http://www.17ext.com/)所有，转载请注明出处