HTML element appear below parent element on hover

HTML & CSS
1

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' id='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. I would like the positioning to be relative to the parent <li> location. Can someone help me out with that?

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 here.

Thanks!

2

It’s quite simple to do dropdowns with CSS (no CSS3 required). Here is a nice example:

http://www.pmob.co.uk/temp/drop-down-basic-good.htm

Have a look at the source code and it should explain what to do. :slight_smile:

3

Thanks, got mine working!

4

Cool, glad to hear it. :slight_smile: