Grow your CSS skills. Land your dream job.

Drop Down Menu Issue

  • # September 15, 2011 at 2:34 pm

    http://theavocadogirl.com/

    I cannot get my drop down menu to work in a WordPress theme. If the main navigation button is smaller than the drop down it creates a margin to the right of the main button when you roll over it. The funny thing is is that it works in Safari after you roll over it the first time. Any idea what would be causing this?

    This is the drop down menu I used: http://www.queness.com/post/1047/easy-to-style-jquery-drop-down-menu-tutorial.

    I changed the category to CSS combat, because my guess is it’s related to the CSS.

    Thank you,

    Laurel

    # September 15, 2011 at 4:18 pm

    add position: absolute to body#home div.nav ul li ul.children

    # September 15, 2011 at 4:30 pm

    Sweet! That fixed that problem. I had it that way at one point I think, but it wasn’t working for some reason. However, this causes the sub menu to display inline, even though I have it as display: block :/.

    # September 15, 2011 at 4:36 pm

    Tried display: table as well for body#home div.nav ul li ul.children a and it still didn’t work. It also doesn’t look like a float problem. There are no floats shown being applied in firebug.

    # September 15, 2011 at 5:01 pm

    I did a clear: both on .children li and it fixed it! Yay! Thanks for the help!

Viewing 5 posts - 1 through 5 (of 5 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".