View Full Version : CSS3 Dropdown Menu Issues

11-14-2012, 06:15 PM
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,


11-14-2012, 07:07 PM
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.

11-14-2012, 07:45 PM
I added Position:relative to the LI you suggested and nothing changed - am I missing something?

11-14-2012, 07:51 PM
Your dropped ul is not in the upper left corner anymore. Am I missing something?

11-14-2012, 07:55 PM
nvm - chrome was displaying cached content - sorry about that :) thanks for the help!!
Love learning something new every day.

11-14-2012, 08:08 PM
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?