-5

サイトの再設計を行っていますが、CSS/javascript に何か問題があり、ドロップダウン メニューが表示されません。JS の入力を間違えました。現在の JS は機能しません。

CSS

#menu {
font-size:large;
margin:0;
padding:0 0 0 .5em;
list-style:none;
width:100%;
text-align:left;
}


#menu ul, #menu li {
padding:0 0 0 2em;
background-color:gray;
width:auto;
border-bottom:1 gray solid;
}

/*LI display inline */
#menu li {
float:left;
background:white;
position:relative;
list-style:none;
margin:0 0 0 0;
text-align:center;

}

/*parent menu*/
#menu li a {
display:block;
padding:0 0 0 0;
height:40px;
font-weight:200;
float:left;
text-decoration:none;
text-align:center;
color:black;
border:1 1 1 1;
}

#menu li a:hover {
color:#eeeeee;
text-align:center;
}

/* style for default selected value */ 
#menu a.selected {
color:#6699FF;
}
/* submenu */ 
#menu ul {
position:absolute;
display:none;
margin:0 0 0 -1px;
padding:0;
list-style:none;
text-align:center;
}

#menu ul {
left: 0;
}
#menu ul ul {
top: -1px;
background:0063dc;
text-align:center;
color:black;
font-weight:200;
text-align:center;
}

#menu ul li {
/*overflow:hidden;*/
border-top:1px solid #eeeeee;
height:25px;
margin:0 0 0 -1px;
}

#menu ul li:hover {
position: relative;
}

#menu ul a {
display:block;
color:white;
}

#menu ul a:hover {
text-decoration:none;
}

JS

$(document).ready(function() {

$("#menu ul").hover(
    function () {
    $(this).children("li").css({zIndex:90}).fadeIn(250);
    },function(){
    $(this).children("li").fadeOut(250);
});//hover

}); HTML

 <input type="hidden" name="arav" />
                    <ul id="menu">
    <li><a href="#">HOME</a></li>
    <li><a href="#">MEMBERS</a></li>
    <li><a href="#">FACTS</a></li> 
    <li><a href="#">TEST</a></li>
    <li><a href="#">EDUCATION</a></li>
    <li><a href="#">RESOURCES</a></li>
    <li><a href="#">RESEARCH</a></li> 
    <li><a href="#">CONTACT US</a></li>



</ul>
4

4 に答える 4

3

#navあなたは代わりに行方不明です#menu。

JavaScript コードの を に変更するか、#navHTMLの を に変更します。#menuid="menu"id="nav"

于 2012-07-13T12:51:39.443 に答える
1

あなたのコードであなたとあなたのJavaScriptを$（'＃nav not menu:)として

アップデート

このコードを試してください

$(document).ready(function() {

    $("#menu li").hover(function () {
      $(this).fadeIn(250);
    },function(){
      $(this).fadeIut(250);
    });//hover

});// document ready

jqueryで#menuliを使用することをすでに選択しているため、this）.childrenを使用する必要はありません。この方法ははるかに実用的です。また、CSSファイルでz-indexを設定するだけです。

于 2012-07-13T12:53:35.433 に答える
0

以下を変更します

$("#nav li").hover(

に

$("#menu li").hover(
于 2012-07-13T12:54:11.730 に答える
0

jqueryコードをに更新します

$(document).ready(function() {

    $("#menu ul").hover(
        function () {
        $(this).children("li").css({zIndex:90}).fadeIn(250);
        },function(){
        $(this).children("li").fadeOut(250);
    });//hover

});
于 2012-07-13T12:54:11.530 に答える