problem with positioning elements

[tony webb]

I have created a simple nav bar using css. The problem is that the sub menu's disappear when I try to click on them.

Here is the css code that I used;

#menu ul {
margin: 5px;
padding: 5px;
font-family: Arial,Verdana;
font-size: 1.5em;
list-style: none;
}

#menu ul li {
display: block;
float: left;
position: relative;
}

#menu li ul {
display: none;
}

#menu ul li a {
display: block;
margin-left: 5px;
padding: 5px 10px 5px 10px;
border-top: 1px solid #fff;
text-decoration: none;
white-space: nowrap;
color: #1107C7;
background: #fffff0;
}

#menu ul li a:hover {
background: #fffff0;
}

#menu li:hover ul {
display: block;
position: absolute;
}

#menu li:hover li {
z-index: 200;
float: none;
font-size: 0.5em;
}

#menu li:hover a {
background: #ff7f50;
}

menu li:hover li a:hover {
background: #fffff0;
}

I don't fully understand it but have made a few color and text changes to a copied nav bar from a book.
What do I need to do to get the sub menu to stay in place when you roll on it and then disappear when you roll off?

You can see what happens by clicking here. I've just tested the nav bar again. Sometimes it stays and sometimes it doesn't.

[cbVision]

The problem is you're hovering off the menu when you try to go to the dropped menu. Try removing the top margin:

#menu ul {
margin: 0 5px 5px;
padding: 5px;
font-family: Arial,Verdana;
font-size: 1.5em;
list-style: none;
}

[tony webb]

Thanks for the reply.

It's done the trick.

In the words of Alex the meerkat "simples" when you know how!