我要制作一个导航栏。我想当我将鼠标悬停在导航栏上时，会显示一个大块。但是，它没有用。
这是我的html代码。
<div id="outerContainer">
<div id="header">
<a id="logo" href="#"><img src="#"></a>
<div id="nav">
<div class="selectors"><a href="#">aaa</a></div>
<div class="selectors"><a href="#">bbb</a></div>
<div class="selectors"><a href="#">ccc</a></div>
<div class="selectors"><a href="#">ddd</a></div>
</div>
</div>
<div id="innerContainer">
<div class="navHidden"></div>
<div class="navHidden"></div>
<div class="navHidden"></div>
<div class="navHidden"></div>
<div id="content"></div>
</div>
而且，这是我的CSS。
#nav{
position:relative;
float:left;
width:600px;
padding-left:30px;
padding-top:25px;
}
.selectors{
width:150px;
position:relative;
float:left;
margin:0;
z-index:10px;
}
.selectors:hover{border-bottom-color:silver;background-color:silver;}
.navHidden{
width:760px;
height:100px;
background-color:silver;
position:absolute;
z-index:10;
display:none;
visibility:hidden;
}
我希望网络变得如下：
| .selectors | .selectors | .selectors | .selectors |
| navHidden .....（仅在悬停时显示）……|
我只能使用html和CSS，因为这是家庭作业。
谢谢。
您的代码已改编，因此现在您有了所需的布局。但这并不完美，我没有删除多余的规则。自己做功课
的HTML
<div id="header">
<a id="logo" href="#"><img src="#"></a>
<div id="nav">
<div class="selectors">
<a href="#">aaa</a>
<div class="navHidden">Lorem ipsum text</div>
</div>
<div class="selectors">
<a href="#">bbb</a>
<div class="navHidden">Lorem ipsum text</div>
</div>
<div class="selectors">
<a href="#">ccc</a>
<div class="navHidden">Lorem ipsum text</div>
</div>
<div class="selectors">
<a href="#">ddd</a>
<div class="navHidden">Lorem ipsum text</div>
</div>
</div>
</div>
的CSS
#nav{
position:relative;
float:left;
width:600px;
padding-left:30px;
padding-top:25px;
}
.selectors{
width:150px;
position:relative;
float:left;
margin:0;
z-index:10px;
}
.selectors:hover{
border-bottom-color:silver;
background-color:silver;
}
.navHidden{
width:760px;
height:100px;
background-color:silver;
position:absolute;
z-index:10;
display:none;
top: 100%;
left: 0;
}
.selectors:hover .navHidden {display: block;}
本文收集自互联网，转载请注明来源。
如有侵权，请联系 [email protected] 删除。
我来说两句