View Full Version : Resolved CSS DropDown

Oct 20th, 2010, 02:35 PM

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; }


Oct 20th, 2010, 02:40 PM
Something like:

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

should do it.

Oct 20th, 2010, 02:48 PM
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?


Oct 20th, 2010, 02:50 PM
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?

Oct 20th, 2010, 02:56 PM
The page is at:

That's without the line added.

Oct 20th, 2010, 03:01 PM
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.

Oct 20th, 2010, 03:04 PM
No go. Still not working.

Oct 20th, 2010, 03:06 PM
Got it.
Changed the {display:none} in the line of code you suggested to {visibility:hidden} seems to have done the trick.