How can I get drop-down functionality working with CSS?

I've been messing with this site's css FOREVER. I can't figure out how to get the "medical" menu item to drop-down and display the rest of the hidden menu items. I've been able to unhide them and expand but not get them to drop-down. What have I got to change, specifically? I tried some tutorials, but maybe I targeted wrong开发者_运维知识库? Also, I'm editing a theme. Maybe something is interfering? Please, help me by inspecting the CSS below and recommending some changes.

thank you!

http://madhwaparishat.co.uk/drupal/sites/all/themes/sky/css/style.css?lj2u6r

http://madhwaparishat.co.uk/drupal/

Try this:

.expanded a:hover + ul,
.expanded ul:hover {display:block !important;z-index:99999;}
.menu ul{position:absolute;}
.menu li{float:left}
.menu .menu a{width:100px}

There's a ton of crazy css @imports on your site, hard to debug. The ! important rule was necessary.

You also need to pick a specific width for you dropdown links, I used 100px.

Hope this helps, I wasn't going to answer but I saw people trying to throw Suckerfish at you, and that's not what you're after - you want to do it yourself. Totally understand.

EDIT: This will probably have to be tuned or javascript will need to be involved if you want to support IE6 and 7.

EDIT: Came back and trimmed the code. There was too much before and it was confusing.

Basically, you want the suckerfish dropdown.