[Solved] CSS Drop-down Nav problem!

[alucard309]

Hey Guys,

I am working on a new nav with drop-down sub menus. Everything is pure CSS. The problem is that my nav displays pretty good on Chrome but if you use a different browser you’ll see a little gap either on the left or right.

Here it is: http://www.keenannagle.com/clientreview/lcswma/newnav/

For the li:hover I am using:
left:-89px;
(This will change on each of the main links on the nav because of location)
top:auto;

Any idea? Please help.

[Paulie_D]

Since every sub-menu is 100% wide of the parent ul why not position it with reference to that…then you don’t need to adjust the position values for each one?

http://codepen.io/Paulie-D/pen/Ggowqg/

[alucard309]

Sorry Paulie_D, I don’t follow you… You meant the li:hover to be width:100%?

[Paulie_D]

Nope….sorry…I mean the div holding the menus that drops down.

The div is always the same width as the top level menu so you can put the position:relative on the parent ul rather than on each li.

Then when you apply position:absolute it will key off the parent menu so you don’t have to adjust the left value every time.

It will always be left:0.

[alucard309]

Still, now it messes up the top nav. This is what I have for the drop-down menus.

/* Drop Down */

.dropdown_1column,
.dropdown_2columns,
.dropdown_3columns,
.dropdown_4columns,
.dropdown_5columns {
position:absolute;
margin:4px auto;
float:left;
left:-999em; /* Hides the drop down */
text-align:left;
padding:10px 5px 10px 5px;
border-top:none;
background:#159bd8;
}

Sorry! :(

[Paulie_D]

It was just a suggestion.

[shaneisme]

I agree with Paulie on this one.

Maybe set up a codepen with just the menu so we can take a closer look at that. It’s also easier for us to debug all the CSS without having to pour through the full file.

[alucard309]

Hey Shaneisme

Here is the codepen:
http://codepen.io/anon/pen/EaPGYB

Please let me know your thoughts. Thanks
Ruben

[shaneisme]

I changed and deleted a lot of your CSS and markup, but got it working.

Please note only the hover on “about” works in the interest of time.

http://codepen.io/drainpip/pen/JoGxqB

[alucard309]

Shaneisme you rock! I added a couple more changes and it works perfectly. Thanks for your help man, I really appreciate it. :)

[shaneisme]

Happy to help.

[Author]

Posts