CSS实现多种样式垂直导航菜单2

时间:2015/12/1 11:15:00来源:互联网 作者:flyso 点击: 942 次

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">         <head>                 <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />                 <meta name="Copyright" content="www.flyso.cn - http://www.flyso.cn" />                 <title>www.flyso.cn--垂直导航菜单</title>                 <style type="text/css"> <!--body {         font-family: Verdana, Arial, Helvetica, sans-serif;         margin: 0;         font-size: 80%;         font-weight: bold;         background: #F3FAFF;         }   ul {         list-style: none;         margin: 0;         padding: 0;         }   /* =-=-=-=-=-=-=-[Menu Four]-=-=-=-=-=-=-=- */   #menu4 {         width: 200px;         border-style: solid solid none solid;         border-color: #D76100;         border-size: 1px;         border-width: 1px;         margin: 10px;         }   #menu4 li a {           height: 32px;           voice-family: "\"}\"";           voice-family: inherit;           height: 24px;         text-decoration: none;         }   #menu4 li a:link, #menu4 li a:visited {         color: #9E3C02;         display: block;         background: url(myfile/images/menu4.gif);         padding: 8px 0 0 30px;         }   #menu4 li a:hover, #menu4 li #current {         color: #fff;         background: url(myfile/images/menu4.gif) 0 -32px;         padding: 8px 0 0 30px;         }   #menu4 li a:active {         color: #fff;         background: url(myfile/images/menu4.gif) 0 -64px;         padding: 8px 0 0 30px;         } --> </style>         </head>           <body>                 <div id="menu4">                         <ul>                                 <!-- CSS Tabs --> <li><a id="current" href="http://www.flyso.cn/default.asp">Home</a></li> <li><a href="http://www.flyso.cn/default.asp?cateID=3">Web Design</a></li> <li><a href="http://www.flyso.cn/default.asp?cateID=6">JavaScript</a></li> <li><a href="http://www.flyso.cn/default.asp?cateID=7">ASP</a></li> <li><a href="http://www.flyso.cn/default.asp?cateID=8">ASP.NET</a></li> <li><a href="http://www.flyso.cn/default.asp?cateID=10">Mixed</a></li> <li><a href="http://www.flyso.cn/default.asp?cateID=11">Download</a></li> <li><a href="http://www.flyso.cn/LoadMod.asp?plugins=GuestBookForPJBlog">GuestBook</a></li> <li><a href="http://www.flyso.cn/tag.asp">Tags Cloud</a></li> <li><a href="http://www.flyso.cn/default.asp?cateID=16">Game</a></li> <li><a href="http://www.flyso.cn/LoadMod.asp?plugins=AboutMeForPJBlog">AboutMe</a></li>                           </ul>                 </div>         </body> </html>

Copyright © 2005 - 2016 flyso.cn. 飞搜 版权所有 鄂ICP备11002783号-3