...

View Full Version : CSS3 Dropdown Menu Issues



andwfara1
11-14-2012, 05: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,

Thanks

Excavator
11-14-2012, 06: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.

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

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

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

andwfara1
11-14-2012, 07: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?



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum