Hover on unusal nav bar (ONLY CSS) - html

Question

I want to make a navigation bar. I supposed a big block would be shown when i hover a the nav bar. However, it didn't work.
This is my html code.
<div id="outerContainer">
<div id="header">
<a id="logo" href="#"><img src="#"></a>
<div id="nav">
<div class="selectors">aaa</div>
<div class="selectors">bbb</div>
<div class="selectors">ccc</div>
<div class="selectors">ddd</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>
And, this is my 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;
}
I want the web become as follow:
|.selectors |.selectors | .selectors | .selectors |
| navHidden .....(only shown when hover)......|
I can only allowed to use html and css, because this is homework.
Thanks.

Answer 1

Your code was adapted so now your have desired layout. But it is NOT PERFECT I did not remove excess rules. Do your homework by yourself
HTML
<div id="header">
<a id="logo" href="#"><img src="#"></a>
<div id="nav">
<div class="selectors">
aaa
<div class="navHidden">Lorem ipsum text</div>
</div>
<div class="selectors">
bbb
<div class="navHidden">Lorem ipsum text</div>
</div>
<div class="selectors">
ccc
<div class="navHidden">Lorem ipsum text</div>
</div>
<div class="selectors">
ddd
<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;}

Answer 2

Try this way to create your navigation.
<style>
ul, li {list-style: none; padding: 0; margin: 0; float: left;}
li a{display: block; width: 100px; height: 40px;}
li a:hover{display: block; width: 100px; height: 40px; background: red;}
li ul {display: none;}
li:hover ul {display: block;}
</style>
</head>
<ul id="nav">
<li class="selectors">aaa</li>
<li class="selectors">bbbb
<ul id="innerContainer">
<li class="navHidden">222</li>
</li>
</ul>
</li>
</ul>