CSS3 Dropdown Menu Issues

[andwfara1]

I’ve added the following code to my site ( http://webdesignerwall.com/tutorials/css3-dropdown-menu ); here’s a copy of my CSS – http://pastebin.com/Dn38bB0Y

On the site, when I hover over the LI that is supposed to “drop” it puts the dropdown list in the top left corner – if I change the positioning from ABSOLUTE to REALTIVE it puts the menu in the “right” location, but it acts as if there is a space for it, stretching the menu and moving the last top-level item to a second row.

The demo of the site can be found here - http://webbetasite.com/family

Please help,

Thanks

[Excavator]

Hello andwfara1,
Look what happens when you make the parent li relative:

#header-container #header-content .top-nav ul.menu li.menu-item, #header-container #header-content .top-nav ul.menu li.current-menu-item {
    color: #5F4D5A;
    float: left;
    font-family: Arial;
    font-size: 12px;
    height: 20px;
    margin-left: 3px;
    margin-right: 10px;
    position: relative;
}

You will need to be more specific as that bit I posted made everything relative and you only want that one li to be relative.
You will also need to adjust the positioning of the dropped ul since top: 50px; isn't quite right.

[andwfara1]

I added Position:relative to the LI you suggested and nothing changed - am I missing something?

[Excavator]

Your dropped ul is not in the upper left corner anymore. Am I missing something?

[andwfara1]

nvm - chrome was displaying cached content - sorry about that thanks for the help!!
Love learning something new every day.

[andwfara1]

do you know how i can make it so that when SERVICES dropdown is active that the hover state that shows the "tab" remains highlighted?