Simple drop down menu

[claire_t]

Hi all

Am getting frustrated with myself right now.

Am attempting my first simple drop down menu and it almost works.
When you hover on the menu item the drop down appears but when you move the mouse to one of the items on the drop down it vanishes.

I'm sure its just 1 tiny little bit I'm missing or done wrong. Can anyone help please!!??

Iv done some investigation and some people are saying about Javascript and I really don't want to use that for this. Others have said about the z-index but I'm not to sure for what and where!!

/*navigation bar*/
.nav ul {
	margin:2px;
	padding:5px;
	font-size:20px;
	margin-left:auto;
	margin-right:auto;
}

.nav li {
	position:relative;
	list-style-type:none;
	float: left;
	display:inline;
	padding:0 10px 0 10px;
	font-size:20px;
	font-weight:bold;
	
}

.nav li ul {
	position:absolute; 
	left:-9999px; 
	top:-9999px; 
	list-style-type:none;
}

.nav li:hover {
	position:relative;
}

.nav li:hover ul 	{
	left:0px; 
	top:29px;   
	z-index:100;
}

.nav li:hover ul li a 	{
	display:block; 
	width:90px;
	height:30px;
	border:thin solid #000; 
	background-color:#F60;
	padding-left:8px;
}

/*end navigation bar*/

<div id="nav_bar">
<ul class="nav">
<li><a href="#">|Home|</a></li>
<li><a href="#">|About|</a>
	<ul>
    <li><a href="#">Aims</a></li>
    <li><a href="#">History</a></li>
    <li><a href="#">Team</a></li>
    </ul>
    </li>
<li><a href="#">|Services|</a></li>
<li><a href="#">|Contact|</a></li>
<li><a href="#">|Blog|</a></li>
</ul>
</div>

Thanks very much

C

[SB65]

Nothing to do with z-index and no need for javascript. Because of this css:

.nav li:hover ul 	{
	left:0px; 
	top:29px;   
}

the top of the drop-down ul does not touch its parent li. Consequently when you hover the parent the drop down appears but as you move the mouse down the hover state is lost and the drop down disappears. Change that 29px to 24px and it's fine, at least in FF. If problems perisist in other browsers try reducing that amount a little more.

[claire_t]

See I knew it would be something so bloody simple!!

Thanks very much SB65, really appreciate it!

C

[claire_t]

OK another problem with my menu.

On the top level I have a image that comes up behind the text on hover. I want the same image to appear on the drop down menu to but whenever i try the code it just continually shows the image and I want it to just show when you hover over the menu item. any ideas?

current css (see above for html)

/*navigation bar*/
.nav ul {
	padding:5px;
	font-size:20px;
	margin-left:auto;
	margin-right:auto;
}

.nav li {
	position:relative;
	list-style-type:none;
	float: left;
	display:inline;
	margin-left:2px;
	padding:0 10px 0 10px;
	font-size:18px;
	font-weight:bold;
	
}

.nav li:hover {
	background-image:url(images/nav_ro.png);
	background-repeat:no-repeat;
	background-position:center;
}



.nav li ul {
	position:absolute; 
	left:-9999px; 
	top:-9999px; 
	list-style-type:none;
}

.nav li:hover {
	position:relative;
}

.nav li:hover ul 	{
	left:0px; 
	top:23px;  
	z-index:1;
}

.nav li:hover ul li 	{
	height:30px; 
	border:none;
}

.nav li:hover ul li a 	{
	display:block; 
	width:180px;
	height:30px;
	border:thin solid #000; 
	background-color:#F60;
	padding-left:8px;
	font-size:18px;
}

/*end navigation bar*/

thanks muchly in advance!

C