WordPress.org

Support

Support » How-To and Troubleshooting » [Resolved] Drop down works in IE, not Firefox

[Resolved] Drop down works in IE, not Firefox

  • Hello!

    Been working on this for weeks, finally got the drop down to work in IE, but not Netscape.

    http://bit.ly/SVGa5M
    In Netscape, if you mouseover the books3 button, you can see the second item on the first sub menu, but you can’t click on it.

    Is it a spacing/padding issue? Or something worse…=)

    Thanks in advance for any help..

Viewing 15 replies - 1 through 15 (of 22 total)
  • That’s because you’ve used margin-left on the anchor tags of the sub menu.
    Use position absolute values, like top and left, not margin.

    Consider using;

    #nav ul li ul.sub-menu li ul.sub-menu {
     left: (n)px;
     top: (n)px;
    }

    WPyogi

    @wpyogi

    Forum Moderator

    You need to stick with one thread on the same topic:
    http://wordpress.org/support/topic/missing-css-for-sub-sub-menu?replies=13

    If you have new information to add, add it to the existing thread. Otherwise, it creates much confusion and frustration for people who are trying to assist you to have no clue what has already been discussed or tried.

    omg it works. *fainting*

    thank you thank you thank you.

    i can die happy now. =)

    WPyogi

    @wpyogi

    Forum Moderator

    LOL – I posted another answer in your other thread, but disregard it if it’s working…

    And I’m resurrected from the dead. =) It worked fine on my test site, but does not work on the real site. All the menus pop out at the same time. I’m back to being at a total loss. I copied the css directly over from my working page to hers…I just don’t know where to look next!

    http://bit.ly/RQVuiI

    WPYogi, thanks. I’ll go take a look.

    Don’t use position relative, use absolute (on the sub-sub menu).

    I changed to this

    #nav ul li ul.sub-menu li ul.sub-menu li a {
        left: 140px;
        position: absolute;
        top: -28px;
    }

    and more of the navigation disappeared.=) What’s there is displaying fine, but the buttons are just gone. There should be three under Phoenix and 1 under Covert….

    First remove the li a on your CSS selectors, to result this;

    #nav ul li ul.sub-menu li ul.sub-menu

    Ok…that gave me 2 books under phoenix and 1 under covert, sort of. Intimate enemies is the one under covert, so it’s still a little topsy turvy..but now I have this code

    #nav ul li ul.sub-menu li ul.sub-menu {
        left: 140px;
        position: absolute;
        top: -28px;
    }

    Apply position: relative; to the <li> elements that contain your sub-sub menus;

    #nav ul li ul.sub-menu li {
     position: relative;
    }

    You may then need to make the sub-sub menu visible only upon :hover of it’s parent <li>;

    #nav ul li ul.sub-menu li ul {
     display: none;
    }
    
    #nav ul li ul.sub-menu li:hover ul {
     display: block;
    }

    #nav ul li ul.sub-menu li {
    text-indent: 0px !important;
    position: relative;}

    okay…do I take out the 0px line? and I leave absolute in the other bit of code

    #nav ul li ul.sub-menu li ul.sub-menu

    or change that to relative as well…it doesn’t end in
    <li>….so I wasn’t sure…

    (sorry, bear with me, I’m trying really really hard to understand!)

    The text indent need not be there, but it can stay. It’s causing no conflict. You ought to leave absolute the other bit of code, that’s concerning the <ul>, this is concerning the <li>.

    criminitly that’s almost got it….the sub sub menu pops up a bit in the wrong spot….but now it’s hidden until the sub is hovered over…

    is that this bit of code?

    #nav ul li ul.sub-menu li ul.sub-menu {
        left: 140px;
        position: absolute;
        top: -28px;
    }

    Sorry, I can’t see the position: relative; on this;

    #nav ul li ul.sub-menu li

    You should then edit the sub-sub menu <ul> style to have top: 0;;

    #nav ul li ul.sub-menu li ul.sub-menu {
     left: 130px;
     top: 0;
     position: absolute;
    }

    i’ve got it here..

    #nav ul li ul.sub-menu li {
    text-indent: 0px !important;
    position: relative;}

    I’m sorry, I switched to working directly on the site, as for some reason it displays differently on hers than mine…

    http://bit.ly/RQVuiI

Viewing 15 replies - 1 through 15 (of 22 total)
  • The topic ‘[Resolved] Drop down works in IE, not Firefox’ is closed to new replies.