Resolved CSS DropDown

[kickthat]

Hi

I have used a CSS drop down menu to work providing information on my site.

To make this clearer. When you hover over a name, it provides details about that person in the drop down menu.

However, as this is tabled with one persons name under the next, I want the drop down to ONLY show up when you hover over the headlink. Meaning that when you lower the mouse onto the drop down list, it disappears.

Can this be done and can anyone help with the code?

The current code for my drop down is as follows

/* General */
	#rankingsdropdown, #rankingsdropdown ul { list-style: none;}
	#rankingsdropdown, #rankingsdropdown * { padding: 0; margin: 0; }
	
	/* Head links */
	#rankingsdropdown li.headlink { width: 137px; float: left; margin-left: -1px; text-align: center; }
	#rankingsdropdown li.headlink a { padding: 15px; }
 
	/* Child lists and links */
	#rankingsdropdown li.headlink ul { position:absolute; display: none; width: 137px; border: 1px black solid; background-color: white; text-align: left; }
	#rankingsdropdown li.headlink:hover ul {display:block}
	#rankingsdropdown li.headlink ul li a { padding: 5px; }
	#rankingsdropdown li.headlink ul li a:hover { background-color: #333; }
	
	/* Pretty styling */
	body { font-family: verdana, arial, sans-serif; font-size: 0.8em; background-color: black; }
	#rankingsdropdown a { color: white; } 
	#rankingsdropdown ul li a:hover { text-decoration: none; }
	#rankingsdropdown li.headlink { background-color: white; background: white; margin-left:auto; margin-right:auto }
	#rankingsdropdown li.headlink ul { background-position: bottom; padding-bottom: 10px; }

Thanks!

[SB65]

Something like:

#rankingsdropdown li.headlink ul:hover {display:none}

should do it.

[kickthat]

Thanks for the reply. It doesn't seem to be doing the trick. I might not be doing it right. Are you suggesting that I simply add it to the code, if so, where?

Or are you suggesting that I should be replacing one of the existing lines of code with that?

Thanks

[SB65]

No, that's an additional line of css. I'm assuming that the .headlink is the menu item we're talking about. If that doesn't work, can you give a link to your page - otherwise I'm just guessing at your html?

[kickthat]

The page is at:
http://www.keelefoos.co.uk/national_rankings.htm

That's without the line added.

[SB65]

The line should be in the css, under the display:block line:

    #rankingsdropdown li.headlink:hover ul {display:block}
        #rankingsdropdown li.headlink ul:hover {display:none}

Give that a try.

[kickthat]

No go. Still not working.

[kickthat]

Got it.
Changed the {display:none} in the line of code you suggested to {visibility:hidden} seems to have done the trick.