求一导航菜单，急，谢谢！

http://singlepine.cnblogs.com/articles/259955.html

解决方案 »

  1.   

    <script type="text/javascript">
    startList.tag = 0;
    function startList(rootObj)
    {
    var navRoot, i=0;
    if(rootObj == '' || rootObj == null) rootObj=document.all.navitree;try
    {
    navRoot = rootObj;
    if(navRoot==null)
    {
    alert('null a wrong accoured');
    }
    else 
    {
    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="out";
    }
    if(startList.tag==1)
    {
    node.className = "out";
    }
    startList(node);
    }
    else if (node.nodeName=="UL")
    {  
    startList.tag = 1;
    startList(node);
    }
    } //for end
    }
    } //try end
    catch(e)
    {
    alert(e);
    } //catch end
    } //startListwindow.onload = startList;
    </script><style type="text/css">
    @import url( style.css );
    body {
    font-size: 11px;
    font-family: 'Courier New';
    }
    .navitree a {
    display: block;
    width: 100%;
    padding: 5px;
    margin: 1px;
    text-decoration: none;
    background: #ffe;
    color: #000;
    }
    .navitree a:hover {
    background: #880;
    color: #fff;
    }
    .navitree, .navitree ul {
    margin: 0px;
    padding: 0px;
    border-bottom: #ccc 1px solid;
    border-right: #ccc 1px solid;
    list-style-type: none;
    }.navitree {
    width: 451px;
    }
    .navitree li {
    position: relative;
    width: 150px;
    padding: 0px;
    border-left: #ccc 1px solid;
    border-top: #ccc 1px solid;
    float: left;
    background: #fff;
    }.navitree li ul li {
    position: relative;
    width: 150px;
    padding: 0px;
    border: #ccc 1px solid;
    border-bottom: 0px;
    border-right: 0px;
    float: left;
    }
    .navitree li ul {
    display: none;
    position: absolute;
    left: -1px;
    top: 26px;
    }.navitree li ul li ul {
    position: absolute;
    left: 149px; /* Set 1px less than menu width */
    top: -1px;
    }
    li.over ul {
    display: block;
    visibility: visible;
    }
    li.out ul {
    visibility: hidden;
    /* 比用 display:none 效率会高 */
    }
    </style>
    <BODY>
    <ul id="navitree" class="navitree">
    <li><a href="#">home</a></li>
    <li>
    <a href="#">about &gt;</a>
    <ul id="second">
    <li><a href="#">history</a></li>
    <li><a href="#">team</a></li>
    <li><a href="#">offices</a></li>
    </ul>
    </li>
    <li>
    <a href="#">services &gt;</a>
    <ul>
    <li>
    <a href="#">web design &gt;</a>
    <ul>
    <li><a href="#">web design - sub1</a></li>
    <li><a href="#">web design - sub2</a></li>
    <li>
    <a href="#">web deisgn - sub3 &gt;</a>
    <ul>
    <li><a href="#">sub3-1</a>
    <li><a href="#">sub3-2</a>
    </ul>
    </li>
    </ul>
    </li>
    </ul>
    </li>
    </ul>
    </BODY>