1

我正在努力在导航栏中显示我的子菜单。我可以毫无问题地显示第一个菜单项，但无法列出第二个子菜单项。这是我到目前为止所拥有的，我只需要知道如何让第二个列表项显示在我的导航中。

HTML：

    <body>
<div class="wrapper">
   <div class="header">

    <p>Project 8</p>
        <div class="content">
     <div class="main">
 <ul class="dropdown">
<li><a href="index.htm">Home</a></li>
<li><a href="web.htm">Web</a>
    <ul>
        <li><a href="web115.htm">WEB-115</a></li>
        <li><a href="web210.htm">WEB-210</a></li>
        <li><a href="web215.htm">WEB-215</a>
            <ul>
                <li><a href="web-215-js.htm">JavaScript</a></li>
                <li><a href="web-215-jq.htm">jQuery</a></li>
            </ul>
        </li>
        <li><a href="web182.htm">WEB-182</a></li>
    </ul>
</li>
<li><a href="dba.htm">Database</a>
    <ul>
        <li><a href="dba110.htm">DBA-110</a></li>
        <li><a href="dba120.htm">DBA-120</a></li>
    </ul>
    </li>
</ul><br /></div>
<div id="footer">
<br />
<p class="clearleft">In Project 8, you will build a jQuery drop-down navigation bar with support    for 'you are here' link markers.</p></div>
 </div>

 </div>
</div>
</body>

CSS：

ul {
margin:0;
padding:0;
list-style:none;
}

ul li {
float:left;
width: 150px;
height: 30px;
line-height: 30px;
background: #777;
text-align: center;
}

ul li a {
text-decoration: none;
color:#fff;
}

ul li li {
background: #777;
color: #fff;
display: none;
}

 ul li ul li ul li {
background: #777;
color: #fff;
position:absolute;
display: inline;
margin: 0 auto;
z-index: 100;
visibility: hidden;

}
/* 
LEVEL ONE
*/
 ul.dropdown                         { position: relative; }
ul.dropdown li                      { font-weight: bold; float: left; zoom: 1; background: #ccc; }
ul.dropdown a:hover                 { color: #000; }
ul.dropdown a:active                { color: #ffa500; }
ul.dropdown li a                    { display: block; padding: 4px 8px; border-right: 1px solid #333;
                                  color:    #222; }
ul.dropdown li:last-child a         { border-right: none; } /* Doesn't work in IE */
ul.dropdown li.hover,
ul.dropdown li:hover                { background: #F3D673; color: black; position: relative; }
ul.dropdown li.hover a              { color: black; }


/* 
LEVEL TWO
*/
ul.dropdown ul                      { width: 220px; visibility:     hidden; position: absolute; top: 100%; left: 0; }
ul.dropdown ul li                   { font-weight: normal; background: #f6f6f6; color: #000; 
                                  border-     bottom: 1px solid #ccc; float: none; }

                                /* IE 6 & 7 Needs Inline Block */
ul.dropdown ul li a                 { border-right: none; width:     100%; display: inline-block; } 

/* 
LEVEL THREE
*/
ul.dropdown ul ul                   { left: 100%; top: 0; }
ul.dropdown li:hover > ul           { visibility: visible; }
#current {
border: 1px dashed #000;
width: 132px;
height: 30px;
line-height: 30px;
color:#FFF;
background: #000;
}

jQuery：

$(document).ready(function() {
/* $("#navigation").navPlugin({
   'itemWidth': 150,
   'itemHeight': 30,
   'navEffect': "slide",
   'speed': 250
 });*/
 $('li').hover(function(){
 $(this).find('ul>li').stop().fadeToggle(400);
 });

 $(function(){

    $("ul.dropdown li").hover(function(){

    $(this).addClass("hover");
    $('ul:first',this).css('visibility', 'visible');

    }, function(){

    $(this).removeClass("hover");
    $('ul:first',this).css('visibility', 'hidden');

    });

        $("ul.dropdown li ul li:has(ul)").find("a:first").append(" &raquo; ").css ('visibility', 'visible');

 });


     youAreHere();
    }); // end ready

       function youAreHere() {
        var pathname = $(location).attr('pathname');
          var curPage = pathname.substring(pathname.lastIndexOf('/')+1);
       //alert(curPage);
        $('a').each(function(){
        if($(this).attr('href') == curPage) {
        $(this).attr('id', 'current');
        } else if(curPage == '') {
        $('a:first').attr('id', 'current');
        }
        else if(curPage == 'web215') {
        $(this).find('ul>li>ul>li').stop().fadeToggle(400);
       }//end else if
    });//end anonymous function

    }

我目前正在上课，对 jQuery 完全陌生。

4

0 回答 0