CSS drop down menu is not working as expected - css

Question

when I make the div's(that contains the drop down menu)positioning to relative and the drop down menu div's positioning to absolute,it shows me only the last item on the drop down menu.if I set drop down menu container div to relative and leave the drop down menu div positioning,then it works.But that affects the rest of the page.So,how to set the positioning that would make the drop down works without affecting any other parts of the page.
HTML
<div id="top_head">
My Online Shop
<div id="nav">
<div class="test">Home</div>
<div class="test" id="product">Products
<div class="test1">shirt</div>
<div class="test1">Pant</div>
<div class="test1">inner</div>
<div class="test1">cap</div>
</div>
<div class="test">About</div>
<div class="test">contact Us</div>
</div>
</div>
CSS
body{
color:green;
}
#top_head{
width:100%;
height:100px;
font:48px Arial green;
border:1px dotted red;
}
#nav{
background-color:gray;
width:57%;
border-radius:5px;
font:28px Arial orange;
margin:0px -49px 5px 15px;
}
#nav a{
color:red;
text-decoration:none;
margin:0px 50px;
}
.test{
float:left;
}
.test:hover{
background-color:orange;
}
#product{
position:relative;
}
.test1{
position:absolute;
border:1px solid red;
visibility:hidden;
}
#product:hover .test1{
visibility:visible;
background-color:yellow;
}
I've tried with display property too. Same results.
If you have any idea where the problem lies, please help.

Answer 1

It looks like the issue here is that you're using position:absolute on all of the sub menu divs. This is essentially making them lay on top of each other (leaving the last one on top).
One solution for this is to wrap all of these elements in a container div and make that the thing that is hidden or shown:
Working Fiddle Demo
Your sub-menu becomes:
<div class="test1">
<div>shirt</div>
<div>Pant</div>
<div>inner</div>
<div>cap</div>
</div>
And the CSS is altered slightly:
.test1{
display:none;
}
.test1 div{
border:1px solid red;
}
#product:hover .test1{
position:absolute;
display: block;
background-color:yellow;
}