Css3 Hover Element Position

[nodirtyrockstar]

Hello fellow coders!

 

I am trying to use tutorials to understand how to make dropdown menus with CSS3. So far so good, except for one little snag. Let me begin by showing you my HTML:

 

<nav id='tabmenu'>
<ul>
	<li><h2><a href='about.php' class='inactive'tabindex='4'>About</a></h2></li>
	<li><h2><a href='flash.php' class='inactive'tabindex='4'>Flash</a></h2></li>
	<li><h2><a href='writing.php' class='inactive'tabindex='4'>Writing</a></h2>
		<ul>
			<li>
				<a href='#' class='inactive' id='tech' onclick='toggleWritingType(this)' tabindex='10'>Technical</a>
				<a href='#' class='inactive' id='jour' onclick='toggleWritingType(this)'' tabindex='9'>Journalism</a>
			</li>
		</ul>
	</li>
	<li><h2><a href='design.php' class='inactive'tabindex='4'>Design</a></h2></li>
	<li><h2><a href='webs.php' class='active' tabindex='4'>Webs</a></h2>
		<ul>
			<li><a href='#' class='active' id='cobra' onclick='toggleSShots(this)' tabindex='9'>Cobra Cabana</a></li>
			<li><a href='#' class='inactive' id='hughes' onclick='toggleSShots(this)' tabindex='10'>Hughes, PhD</a></li>
			<li><a href='#' class='inactive' id='rasche' onclick='toggleSShots(this)' tabindex='11'>Rasche</a></li>
		</ul>
	</li>
</ul>
</nav>

 

So, as you can see I have two submenus, and potentially one more if I can get this working. The tuts I found online created an absolute position for one submenu, which does not apply well to the second menu since they should not be in the exact same location. I think I now have a good understanding about how to use CSS3 to make submenus appear and reappear, but I'm not so clear on the placement. Is there a way to write one rule that applies to any submenu to appear beneath (relative to) it's parent <ul>?

 

Here is my CSS for the nav:

 

#tabmenu {
width: 985px;
margin: 0 auto 10px;
height: 40px;
border-bottom: 1px #fff solid;
}
#tabmenu a{
background-color: #000;
color: #fff;
width:150px;
height:40px;
line-height: 40px;
float: right;
text-align:center;
text-decoration: none;
}
#tabmenu a.inactive:hover {
color: #999;
opacity: 0.7;
filter: alpha(opacity=70);
-khtml-opacity: 0.7;
-moz-opacity: 1;
}
#tabmenu a.active, #tabmenu ul a.active {
background-color: #fff;
color:#000;
}
#tabmenu ul ul {
display: none;
}
#tabmenu li:hover > ul { //This is the major area of concern, I believe.
display: block;
top: 40px;
position: relative;
height: 120px;
width: 150px;
}

 

I made a fiddle: http://jsfiddle.net/cTcVT/

 

Thanks!

Edited November 30, 2012 by nodirtyrockstar

[nodirtyrockstar]

This is what finally did it for me:

 

 

#tabmenu {
width: 985px;
margin: 0 auto 10px;
height: 40px;
border-bottom: 1px #fff solid;
position: relative;
}
#tabmenu ul {
float: right;
}
#tabmenu a{
background-color: #000;
color: #fff;
width:150px;
height:40px;
line-height: 40px;
float: right;
text-align:center;
text-decoration: none;
display: block;
}
#tabmenu a:hover {
color: #999;
opacity: 0.7;
filter: alpha(opacity=70);
-khtml-opacity: 0.7;
-moz-opacity: 1;
}
#tabmenu a.active{
background-color: #fff;
color:#000;
}
#tabmenu li {
position: relative;
display: block;
float: left;
}
#tabmenu ul ul {
visibility: hidden;
position: absolute;
left: 0;
top: 100%;
}
#tabmenu ul ul > li {
float: none;
}
#tabmenu li:hover > ul {
visibility: visible;
}