面試時候寫的CSS橫向二級菜單

2024-09-05 12:20:24

字體：大中小

來源：轉載

供稿：網友

面試時候寫的橫向二級菜單，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" content="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>文章        <ul>            <li>隨筆</li>            <li>小說</li>        </ul>    </li>    <li>設計        <ul>            <li>漫畫</li>            <li>攝影</li>            <li>圖文</li>        </ul>    </li>    <li>資源        <ul>            <li>代碼</li>            <li>素材</li>        </ul>    </li>    <li>收藏夾</li>    <li>愛好        <ul>            <li>哲學</li>            <li>小說</li>        </ul>    </li>    <li>日記        <ul>            <li>生活</li>            <li>工作</li>        </ul>    </li>    <li>日程        <ul>            <li>計劃事項</li>            <li>已做事項</li>        </ul>    </li>    <li>其他        <ul>            <li>關于</li>            <li>留言</li>        </ul>    </li></ul></body></html>

上一篇：Windows 風格選項卡標簽

下一篇：日本門戶網站的經典選項卡導航