...

View Full Version : Resolved CSS DropDown



kickthat
10-20-2010, 02:35 PM
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
10-20-2010, 02:40 PM
Something like:


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


should do it.

kickthat
10-20-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?

Thanks

SB65
10-20-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?

kickthat
10-20-2010, 02:56 PM
The page is at:
http://www.keelefoos.co.uk/national_rankings.htm

That's without the line added.

SB65
10-20-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.

kickthat
10-20-2010, 03:04 PM
No go. Still not working.

kickthat
10-20-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.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum