(Some) Nav Menus "Push Out" Following Menus

[angiemel]

http://www.bubbles4sale.com

Got my little icons working only now several of my nav links seem to push the subsequent links down.

Best way to understand is to go there and notice the difference between the good links:
> Organiztions, Tools, What's VAYA, Skincare, B&B, Team Member Training

... and the BAD (pushy) links:
> Home, Motivators, Marketing, Tech/Web Pros, Jewelry


Maybe it's something with the #nav li's or ... something??? Lost on this one, especially since some work fine then others don't. Is it a depth setting... um...

[SoZo]

Your li a:hover and li a have different padding.

[angiemel]

THERE u r SoZo... thought you'd abandoned me!

That worked of course.

However, now each of the menus "vibrate" when I hover between them. Perhaps ... has something to do with the width or padding not being equal on all related items? I'm digging thru that section now & trying to find it on my local install, changed the padding of the 2nd #nav li to padding: 0px;... but that didn't fix it.

Thoughts?

[angiemel]

Don't think I'm understanding this #nav section right. I think I get that they are divs, referencing how to display the nav bar menu items, but I don't think I get why there are only 2 lis, or why they're all separated. Like,there's a #nav, #nav li, #nav li li... if it's for the levels of menus why aren't there more than 2 since there are more than 2 menu drop downs?

#nav li a -vs- #nav li li a -vs- #nav li li a:hover -vs- #nav li li a:link blah blah blah

If it's the nav bar, display this way...

If it's the nav bar in a list item, display this way...

If it's the nav bar in a 2nd list item, display this way...

If it's the nav bar, hovering, or a link, or visited, or active display this way...???

I gotta go play with Firebug & my local install, but wanted to let you know how I'm understanding this section -- may be easier to answer my wacky question if u see where I'm confused.

Thanks.

[SoZo]

That's all sorts of jacked up now. What have you been doing?

#nav is the div
#nav li are the list items within the #nav div
#nav li a... are the list items with anchors
#nav li li are the list items within a list item. So you only need one since each subsequent drop is still a list within a list...
Anything with "hover" appended is just that, the mouse over behaviour.

And presently you have 0 padding for the hover selectors. Unless you want things to move around on mouse over you need to make sure the padding between anchor items and there hover counterpart match.

[angiemel]

Ohhhhhhhhhhh... LOLOLOL -- no... literally... I'm sitting at my desk shaking my head at myself. -Sigh- So much to learn.

Will try it & report back - (was so discouraged that I haven't TOUCHED it all weekend).

Stop laughin' at my pain! LOL