Simple CSS drop down menu help

Hi all,

I’m have a very annoying issue trying to implement a simple CSS based drop down menu into a nav bar. The nav bar is made up of 7 images that change opacity when hovered over. What I need to do is put a simple drop down box on the sixth menu item (FAQ) with two sub items which link off to their respectable pages. Now normally this is easy to do but I’m finding no matter how many online tutorials I find (13 so far), it doesn’t work and ends up either just not working or messing up the whole layout of the nav bar.

Anyways here is the HTML for the nav bar, very straight forward:

[CODE]
<div id=”header”>
<div class=”nav”>
<ul>
<li><a href=”#”><img src=”img/nav_1.png” alt=”” /></a></li>
<li><a href=”#”><img src=”img/nav_2.png” alt=”” /></a></li>
<li><a href=”#”><img src=”img/nav_3.png” alt=”” /></a></li>
<li><a href=”#”><img src=”img/nav_4.png” alt=”” /></a></li>
<li><a href=”#”><img src=”img/nav_5.png” alt=”” /></a></li>
<li><a href=”#””><img src=”img/nav_6.png” alt=”” /></a></li>
<ul>
<li><a href=”#”>Submenu 1</a></li>
<li><a href=”#”>Submenu 2</a></li>
</ul>
<li><a href=”#”><img src=”img/nav_7.png” alt=”” /></a></li>
</ul>
</div>
</div>
[/CODE]

And the CSS driving it at the moment is:

[CODE]
#header{
margin:122px 0 19px 0;
background:url(../img/nav_bg.png) no-repeat;
height:79px;
}

#header .nav{
}

#header .nav li{
margin:25px 30px 0 0;
display:inline-block;
zoom:1;
display:inline;
float:left;
opacity: 0.7;
filter: alpha(opacity=75);
position:relative;
top:0px;
left:17px;
}

#header .nav a{
margin:0 8px 0 0;
padding:26px -50px 23px 0;
opacity: 0.7;
filter: alpha(opacity=75);
float:left
}

#header .nav li.selected{
opacity: 1;
filter: alpha(opacity=100);
}

#header .nav li.selected a{
opacity: 1;
filter: alpha(opacity=100);
}

#header .nav li:hover{
opacity: 1;
filter: alpha(opacity=100);
}

#header .nav li:hover a{
/*background:url(../img/navbar_select.png) no-repeat; */
opacity: 1;
filter: alpha(opacity=100);
}
[/CODE]

So yeah, the nav bar is pretty simple but I can’t for the life of me work out how to implement some sort of drop down box using CSS. Any help with this coding would be very much appreciate.

Kind Regards.

Also in #CSS _↴