Navigation dissapears when hover problem

[liamloveslearning]

Hi all,

 

I have a navigation bar, that when a top level item is hovered another set of links appears above.

Both sets of navigation bars are left alligned. My problem is that when I hover over one of the top level options to show the second set of links, when i go to point my cursor at the new links they dissapear as my cursor is no longer 'hovering' on the button to activate this, does this make sense? So i need my second navigation to stay visible until it is clicked, My code is...

 

<ul id="topnav">
<li class="c1"><a href="#">Home</a></li>
<li class="c1"><a href="#">About</a> <span class="c2"><a href="#">The Company</a> <a href="#">The Team</a> <a href="#">Careers</a></span></li>
<li class="c1"><a href="#">Services</a> <span class="c2"><a href="#">What We Do</a> <a href="#">Testimonials</a></span></li>
<li><a href="#">Contact</a></li>
</ul>

 

CSS

ul#topnav {
margin : 0;
padding : 0;
float : left;
width : 100%;
list-style : none;
position : relative;
font-size : 12px;
}

ul#topnav li {
float : left;
margin : 0;
padding : 0;
}

ul#topnav li a {
background : transparent url("images/buttonup.png") no-repeat scroll 0% 0%;
color : #666666;
display : block;
height : 25px;
padding : 20px 7px 0;
text-decoration : none;
width : 110px;
}

ul#topnav li span {
float : left;
padding : 15px 0;
position : absolute;
left : 0;
top : -35px;
background : none;
display : none;
color : #000000;
}

ul#topnav li span a {
display : inline;
background : none;
height : auto;
}

ul#topnav li span a:hover {
color : red;
}

[liamloveslearning]

Nevermind! sorted it