我的 css 下拉菜单不显示子菜单
My css dropdown menu's won't show the sub menu
当我将鼠标悬停在选项卡上时,子菜单没有显示,几天来我一直在努力寻找修复方法。我已经研究语法一段时间了,我觉得我需要一双新眼睛。请尽快帮忙
<header id="header" class="HeaderStyle" style="padding-bottom: 0px; padding-top: 0px;">
<p style="font-size: xx-large; width: 400px;margin-top: 0px;margin-bottom: 0px;margin-right: 0%;"> Sherwood Lego League</p>
<form method="get" action="http://www.google.com/search" style="text-align:right; width: 99%;">
<input type="text" name="q" size="25" maxlength="255" value="" placeholder="Search">
<input type="submit" value="Search">
<input type="hidden" name="sitesearch" value="www.SherwoodLegoLeague.com">
</form>
<navigation id="NavigationLink" class="navigationStyle">
<section class="menu">
<ul>
<li><a class="left_nosub" href="home.html">Home</a></li>
<li><a class="center_hassub" href="teams/teams.html">Teams</a>
<ul>
<li><a href="teams/team1.html">Team 1</a></li>
<li><a href="teams/team2.html">Team 2</a></li>
<li><a href="teams/team3.html">Team 3</a></li>
<li><a href="teams/team4.html">Team 4</a></li>
<li><a href="teams/team5.html">Team 5</a></li>
</ul>
</li>
<li><a class="center_hassub" href="news/news.html">News</a>
<ul>
<li><a href="news/article.html">Articles</a></li>
<li><a href="news/timeline.html">Timeline</a></li>
</ul>
</li>
<li><a class="right_nosub" href="contactUs.html">Contact Us</a></li>
</ul>
</section>
</navigation>
</header>
CSS节
.menu {
font-family: "TimesNewRoman", Times, serif;
position: relative;
font-size: 11px;
margin: 0;
z-index: 1000;
}
.menu ul li a {
display: block;
text-decoration: none;
color: #f0f0f0;
font-weight: bold;
width: 81px;
height: 42px;
text-align: center;
border-bottom: 0;
background-image: url('../images/MenuPieces/center.png');
line-height: 48px;
font-size: 11px;
overflow: hidden;
padding-left: 1px;
}
.menu .left_nosub {
background-image: url('../images/MenuPieces/left.png');
padding-left: 1px;
margin-right: -1px;
}
.menu .right_nosub {
background-image: url('../images/MenuPieces/right.png');
}
.menu ul {
padding: 0;
margin: 0;
list-style: none;
}
.menu ul li {
float: left;
position: relative;
}
.menu ul li ul {
display: none;
}
.menu ul li:hover a {
color: #000;
background: url('../images/MenuPieces/center_hassub.png');
}
.menu ul li:hover ul li a.center_hassub {
background: #6a3;
color: #000;
}
.menu ul li:hover ul li:hover a.center_hassub {
background: #6fc;
color: #000;
}
.menu ul li:hover ul li ul {
display: none;
}
.menu ul li:hover .left_nosub {
color: #000;
background: url('../images/MenuPieces/left_nosub.png');
}
.menu ul li:hover .right_hassub {
color: #000;
background: url('../images/MenuPieces/right_hassub.png');
}
.menu ul li:hover .right_nosub {
color: #000;
background: url('../images/MenuPieces/right_nosub.png');
}
.menu ul li:hover ul li a {
background-image: none;
display: block;
height: 28px;
line-height: 26px;
color: #000;
width: 142px;
text-align: left;
margin: 0;
padding: 0 0 0 11px;
font-weight: normal;
}
.menu ul li:hover ul {
margin: 0 0 0 3px;
padding: 0;
background-image: url('../images/MenuPieces/dropdown.png');
background-repeat: no-repeat;
background-position: bottom left;
}
.menu ul li:hover ul li a:hover {
color: #000 !important;
background-image: url('../images/MenuPieces/sub_hover.png');
}
.menu ul li:hover ul li:hover ul {
display: block;
position: absolute;
left: 105px;
top: 0;
}
.menu ul li:hover ul li:hover ul.left {
left: -105px;
}
.menu ul li:hover ul .sub_active {
background-image: url('../images/MenuPieces/sub_active.png');
margin-right: 1px;
}
您默认隐藏了它们,但您忘记在悬停时向它们添加显示 属性。您需要向 .menu ul li:hover ul li a:hover
和 .menu ul li:hover ul
选择器添加类似 display: block;
或 display: inline-block;
或类似 属性 的内容。
ul li:hover ul {
display:block;
}
有这样的东西,当你悬停在ul li上时,你会显示ul。
当我将鼠标悬停在选项卡上时,子菜单没有显示,几天来我一直在努力寻找修复方法。我已经研究语法一段时间了,我觉得我需要一双新眼睛。请尽快帮忙
<header id="header" class="HeaderStyle" style="padding-bottom: 0px; padding-top: 0px;">
<p style="font-size: xx-large; width: 400px;margin-top: 0px;margin-bottom: 0px;margin-right: 0%;"> Sherwood Lego League</p>
<form method="get" action="http://www.google.com/search" style="text-align:right; width: 99%;">
<input type="text" name="q" size="25" maxlength="255" value="" placeholder="Search">
<input type="submit" value="Search">
<input type="hidden" name="sitesearch" value="www.SherwoodLegoLeague.com">
</form>
<navigation id="NavigationLink" class="navigationStyle">
<section class="menu">
<ul>
<li><a class="left_nosub" href="home.html">Home</a></li>
<li><a class="center_hassub" href="teams/teams.html">Teams</a>
<ul>
<li><a href="teams/team1.html">Team 1</a></li>
<li><a href="teams/team2.html">Team 2</a></li>
<li><a href="teams/team3.html">Team 3</a></li>
<li><a href="teams/team4.html">Team 4</a></li>
<li><a href="teams/team5.html">Team 5</a></li>
</ul>
</li>
<li><a class="center_hassub" href="news/news.html">News</a>
<ul>
<li><a href="news/article.html">Articles</a></li>
<li><a href="news/timeline.html">Timeline</a></li>
</ul>
</li>
<li><a class="right_nosub" href="contactUs.html">Contact Us</a></li>
</ul>
</section>
</navigation>
</header>
CSS节
.menu {
font-family: "TimesNewRoman", Times, serif;
position: relative;
font-size: 11px;
margin: 0;
z-index: 1000;
}
.menu ul li a {
display: block;
text-decoration: none;
color: #f0f0f0;
font-weight: bold;
width: 81px;
height: 42px;
text-align: center;
border-bottom: 0;
background-image: url('../images/MenuPieces/center.png');
line-height: 48px;
font-size: 11px;
overflow: hidden;
padding-left: 1px;
}
.menu .left_nosub {
background-image: url('../images/MenuPieces/left.png');
padding-left: 1px;
margin-right: -1px;
}
.menu .right_nosub {
background-image: url('../images/MenuPieces/right.png');
}
.menu ul {
padding: 0;
margin: 0;
list-style: none;
}
.menu ul li {
float: left;
position: relative;
}
.menu ul li ul {
display: none;
}
.menu ul li:hover a {
color: #000;
background: url('../images/MenuPieces/center_hassub.png');
}
.menu ul li:hover ul li a.center_hassub {
background: #6a3;
color: #000;
}
.menu ul li:hover ul li:hover a.center_hassub {
background: #6fc;
color: #000;
}
.menu ul li:hover ul li ul {
display: none;
}
.menu ul li:hover .left_nosub {
color: #000;
background: url('../images/MenuPieces/left_nosub.png');
}
.menu ul li:hover .right_hassub {
color: #000;
background: url('../images/MenuPieces/right_hassub.png');
}
.menu ul li:hover .right_nosub {
color: #000;
background: url('../images/MenuPieces/right_nosub.png');
}
.menu ul li:hover ul li a {
background-image: none;
display: block;
height: 28px;
line-height: 26px;
color: #000;
width: 142px;
text-align: left;
margin: 0;
padding: 0 0 0 11px;
font-weight: normal;
}
.menu ul li:hover ul {
margin: 0 0 0 3px;
padding: 0;
background-image: url('../images/MenuPieces/dropdown.png');
background-repeat: no-repeat;
background-position: bottom left;
}
.menu ul li:hover ul li a:hover {
color: #000 !important;
background-image: url('../images/MenuPieces/sub_hover.png');
}
.menu ul li:hover ul li:hover ul {
display: block;
position: absolute;
left: 105px;
top: 0;
}
.menu ul li:hover ul li:hover ul.left {
left: -105px;
}
.menu ul li:hover ul .sub_active {
background-image: url('../images/MenuPieces/sub_active.png');
margin-right: 1px;
}
您默认隐藏了它们,但您忘记在悬停时向它们添加显示 属性。您需要向 .menu ul li:hover ul li a:hover
和 .menu ul li:hover ul
选择器添加类似 display: block;
或 display: inline-block;
或类似 属性 的内容。
ul li:hover ul {
display:block;
}
有这样的东西,当你悬停在ul li上时,你会显示ul。