面试时候写的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 风格选项卡标签

下一篇：日本门户网站的经典选项卡导航