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

时间:2015/12/1 11:16:00来源:互联网 作者:flyso 点击: 985 次
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN">
 
<html>
        <head>
                <title>www.flyso.cn-3D垂直导航菜单</title>
                <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<meta name="Copyright" content="www.flyso.cn - http://www.flyso.cn" />
                <meta name="author" content="FLYSO" />
                <style type="text/css">
<!--
/* CSS Tabs */
#navlist {
        color: white;
        background: #17a;
        border-bottom: 0.2em solid #17a;
        border-right: 0.2em solid #17a;
        padding: 0 1px;
        margin-left: 0;
        width: 12em;
        font: normal 10px Verdana, sans-serif;
}
 
#navlist li {
        list-style: none;
        margin: 0;
        font-size: 1em;
}
 
#navlist a {
        display: block;
        text-decoration: none;
        margin-bottom: 0.5em;
        margin-top: 0.5em;
        color: white;
        background: #39c;
        border-width: 1px;
        border-style: solid;
        border-color: #5bd #035 #068 #6cf;
        border-left: 1em solid #fc0;
        padding: 0.25em 0.5em 0.4em 0.75em;
}
 
#navlist a#current { border-color: #5bd #035 #068 #f30; }
 
#navlist a {
        width: 99%;
        /* only necessary for Internet Explorer */
}
 
#navlist a {
        voice-family: "\"}\"";
        voice-family: inherit;
        width: 9.6em;
        /* Tantek-hack should only used if Internet-Explorer 6 is in standards-compliant mode */
}
 
#navcontainer>#navlist a {
        width: auto;
        /* only necessary if you use the hacks above for the Internet Explorer */
}
 
#navlist a:hover, #navlist a#current:hover {
        background: #28b;
        border-color: #069 #6cf #5bd #fc0;
        padding: 0.4em 0.35em 0.25em 0.9em;
}
 
#navlist a:active, #navlist a#current:active {
        background: #17a;
        border-color: #069 #6cf #5bd white;
        padding: 0.4em 0.35em 0.25em 0.9em;
}
-->
</style>
                </style>
</head>
 
        <body>
 
                <div id="navcontainer">
                        <ul id="navlist">
                                <!-- 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