面試時候寫的CSS橫向二級菜單_菜單導航特效

面試時候寫的橫向二級菜單，CSS配合了JavaScript，比較通用，形式也不錯，因時間關系沒有過多美化，放上來讓大家繼續完善或修改美化，感覺還是挺實用的，希望大家喜歡。

<!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">
<head>
<title>二級橫向菜單</title>
<meta http-equiv="Content-Type" mrc="text/html; charset=utf-8" />
<script type="text/javascript">
startList = function() {
    if (document.all && document.getElementById) {
        navRoot = document.getElementById("nav");
            for (i=0; i < navRoot.childNodes.length; i++) {
                node = navRoot.childNodes[i];
                if (node.nodeName=="LI") {
                    node.onmouseover=function() {
                    this.className+=" over";
                }
                node.onmouseout=function() {
                    this.className=this.className.replace(" over", "");
                }
            }
        }
    }
}
window.onload = startList;
</script>
<style type="text/css" media="all">
html {min-width: 742px;}
img{border:0;}
p.access {display:none;}
div#counters{display:none;}
a{text-decoration: none;}
body{
    overflow:auto;
    text-align: center;
    margin: 0 auto;
    padding: 0;
    border: 0;
}
ul#nav,ul#nav ul{
    margin: 0 auto;
    text-align:left;
    padding: 0;
    list-style: none;
    background:#fff;
    z-index:99;
}
ul#nav {
    width:732px;
    display:block;
    height:24px;
    clear:both;
}
ul#nav li {
    position: relative;
    z-index:999;
    float:left;
}
ul#nav ul li{
    display:block;
}
ul#nav ul {
    width:100px;
    height:auto;
    position: absolute;
    text-align:left;
    left: 0px;
    display: none;
    border:solid 1px #697210;
}
ul#nav li.over a,ul#nav li:hover a{
    border-color:#E2144A;
    background: #fdd;
    font-weight:bold;
    color: #E2144A;
}
ul#nav li.over ul a,ul#nav li:hover ul a{
    background:#fff;
    font-weight:normal;
    color:#777;
}
ul#nav li.over ul a:hover,ul#nav li:hover ul a:hover{
    background:#fff;
    font-weight:normal;
    color: #E2144A;
    background: #fdd;
    border-color:#E2144A;
    font-weight:bold;
}

ul#nav a {
    font-size:14px;
    line-height:17px;
    display: block;
    padding:0 0 0 10px;
    width:78px;
    color: #777;
    height:17px;
    background: #fff;
    border-left:solid 1px #fff;
    border-top:solid 1px #fff;
    border-right:solid 1px #fff;
    border-bottom:solid 5px #697210;
}
ul#nav ul li{
    width:100px;
    border:0;
}
/* Fix IE. Hide from IE Mac \*/
* html ul#nav li { float: left; height: 17px; }
* html ul#nav li a {  height: 17px; }
ul#nav ul a { padding: 2px 0px 2px  10px;border:0;width:90px; } 
ul#nav li:hover ul,ul#nav  li.over ul { display: block; } 
</style>
</head>
<body>
<p>一款面試時寫的菜單</p>
<ul id="nav">
    <li><a href="#">文章</a>
        <ul>
            <li><a href="#">隨筆</a></li>
            <li><a href="#">小說</a></li>
        </ul>
    </li>
    <li><a href="#">設計</a>
        <ul>
            <li><a href="#">漫畫</a></li>
            <li><a href="#">攝影</a></li>
            <li><a href="#">圖文</a></li>
        </ul>
    </li>
    <li><a href="#">資源</a>
        <ul>
            <li><a href="#">代碼</a></li>
            <li><a href="#">素材</a></li>
        </ul>
    </li>
    <li><a href="#">收藏夾</a></li>
    <li><a href="#">愛好</a>
        <ul>
            <li><a href="#">哲學</a></li>
            <li><a href="#">小說</a></li>
        </ul>
    </li>
    <li><a href="#"'>日記</a>
        <ul>
            <li><a href="#">生活</a></li>
            <li><a href="#">工作</a></li>
        </ul>
    </li>
    <li><a href="#">日程</a>
        <ul>
            <li><a href="#"'>計劃事項</a></li>
            <li><a href="#">已做事項</a></li>
        </ul>
    </li>
    <li><a href="#">其他</a>
        <ul>
            <li><a href="#">關于</a></li>
            <li><a href="#">留言</a></li>
        </ul>
    </li>
</ul>
</body>
</html>

所屬頻道：菜單導航特效/更新時間：2012-11-22

[收藏][報錯][返回列表]

相關菜單導航特效：

欧美三区四区_av先锋影音资源站_亚洲第一论坛sis_影音先锋2020色资源网_亚洲精品社区_在线免费观看av网站_国产一区二区伦理_亚洲欧美视频一区二区_99视频精品全部免费在线_精精国产xxxx视频在线

面試時候寫的CSS橫向二級菜單_菜單導航特效

菜單導航特效Rss訂閱特效代碼搜索

菜單導航特效推薦

猜你也喜歡看這些