我正在使用基本的 HTML ul/li 列表、基本的 CSS 代码和基本的 jQuery 代码编写菜单导航。我有多个级别的菜单,问题是一旦显示第一级,它就会自动显示它下面的所有级别。查看链接以查看是否在行动。SheetMusic & Media 菜单是有问题的。
我需要帮助让所有这些子菜单项默认不显示吗?你们中有人知道我该怎么做吗?
我希望你们中的一个有答案。
摩根肯扬
这是我在jsFiddle中工作的相关代码。
HTML
<div id="container">
<ul id="dropdown">
<li class="mainnav"><a href="#">About</a></li>
<li class="mainnav"><a href="#">Sheet Music</a>
<img class="droparrow" src="@ACCOUNTRESOURCES/DropdownTriangle75.png"/>
<ul>
<li><a href="#">Solos</a>
<img class="dropRarrow" src="@ACCOUNTRESOURCES/DropdownRTriangle75.png">
<ul>
<li><a href="#">Solo 1</a></li>
<li><a href="#">Solo 2</a></li>
</ul>
</li>
<li><a href="#">Exercises</a>
<img class="dropRarrow" src="@ACCOUNTRESOURCES/DropdownRTriangle75.png">
<ul>
<li><a href="#">Snare Drum</a></li>
<li><a href="#">Tenors</a></li>
<li><a href="#">Bass Drum</a></li>
<li><a href="#">Various Corps.</a></li>
<li><a href="#">Drum Set</a></li>
</ul>
</li>
<li><a href="#">Rudiments</a></li>
</ul>
</li>
<li class="mainnav"><a href="#">Gallery</a></li>
<li class="mainnav"><a href="#">Media</a>
<img class="droparrow" src="@ACCOUNTRESOURCES/DropdownTriangle75.png">
<ul>
<li><a href="#">Video</a>
<img class="dropRarrow" src="@ACCOUNTRESOURCES/DropdownRTriangle75.png">
<ul>
<li><a href="#">Solos</a>
<img class="dropRarrow" src="@ACCOUNTRESOURCES/DropdownRTriangle75.png">
<ul>
<li><a href="#">Snare</a></li>
<li><a href="#">Tenor</a></li>
</ul>
</li>
<li><a href="#">Ensembles</a></li>
<li><a href="#">Rudiments</a></li>
<li><a href="#">Miscellaneous</a></li>
</ul>
</li>
<li><a href="#">Audio</a></li>
</ul>
</li>
</ul>
CSS
#dropdown {
margin:0px 0px 0px 34px;
padding:0;
list-style:none;
}
#dropdown li {
float:left; /* Show list items inline */
margin: 3px 3px 1px 3px;
/*padding: 7px 5px 14px 5px;*/
position:relative;
font-size:100%;
}
#dropdown li a {
display:block; /* Making sure a element covers whole li area */
text-decoration:none; /* No underline */
color:#FFFFFF;
font-family: Calibri;
font-size: 16px;
font-weight: bold;
padding:1px 7px 1px 7px;
margin: 26px 0px 0px 7px;
}
#dropdown li a:hover {
background:rgba(255,255,255,.75);
color:#000000;
cursor:pointer;
text-decoration:none;
/*margin: 0px 0px 7px 7px;*/
border-radius:2px;
-moz-border-radius:25px; /* Firefox 3.6 and earlier */
}
/*Second Level */
#dropdown ul {
position:absolute;
left:0;
display:none;
margin:-3px 0px 0px 7px;
padding:0px 0px 0px 0px;
list-style:none;
background: rgba(255, 255, 255, 0.75);
border-radius:3px;
z-index:4;
}
#dropdown ul:hover {
position:absolute;
left:0;
margin:-3px 0px 0px 7px;
padding:0px 0px 0px 0px;
list-style:none;
}
#dropdown ul li {
float:left;
width:108px;
height:20px;
padding: 0px 0px 0px 0px;
border-top:none;
}
#dropdown ul li a {
display:block; /* Making sure a element covers whole li area */
width:100px;
padding: 2px 10px 2px 5px;
margin: 0px 0px 0px 0px;
color:#000000;
text-decoration:none;
}
#dropdown ul li a:hover {
padding: 2px 0px 2px 5px;
margin: 0px 0px 0px 0px;
color: rgba(255,255,255,1);
background: rgba(0,0,0,.75);
}
/*Third Level */
#dropdown ul ul {
position:absolute;
display:none;
left:0;
padding:0px 0px 0px 0px;
margin:-22px 0px 0px 118px;
}
#dropdown ul ul:hover {
padding:0px 0px 0px 0px;
margin:-22px 0px 0px 118px;
}
.droparrow {
margin: 10px 0px 0px 30px;
display:none;
}
.dropRarrow {
position:absolute;
display:none;
margin: -23px 0px 0px 111px;
}
jQuery
$(document).ready(function () {
$('#dropdown li').hover(
function () {
$('ul, img', this).show();
},
function () {
$('ul, img', this).hide();
}
);
});