• I am building a site for a friend. The dropdown menus disappear for him when he tries to scroll down to make a selection. I cannot replicate the problem, but he has been having the problem for over a week.

    I am using 3.01 and (my own custom) child theme of Twenty-ten (style.css and header.php modified somewhat, no other tampering). It is running at http://www.word-turner.com/propellerbeanie. The only plugin running is Enhanced Recent Posts.

    Displays fine on my Mac (OS 10.6.4) and Safari (5.0.2). (Displays fine also in Firefox, Opera, Google Chrome, Seamonkey, and Navigator.)

    Dropdown menus disappear on the friends’ Mac (OS 10.5.?). We trashed his Safari 4.x and downloaded and installed 5.0 for him, but the problem was unchanged. The site works fine for him when viewed with Firefox. I’ve also tried re-installing WP 3.01 (which brings with it a fresh version of the parent theme Twenty Ten).

    Since it’s a behavior, screen capture services like browsershots.org do not reveal whether other browsers are having the problem.

    I’m fresh out of ideas of what to check! Suggestions?

Viewing 9 replies - 1 through 9 (of 9 total)
  • Sounds like a CSS issue – probably with margins or positioning If you have even a 1px margin or “blank” space between the sub-menu links, the dropdown will disappear. Looking at your site, there does seem to be quite a gap between your sub-menu links.

    You might also want to sort out some of your CSS errors.

    Thread Starter marthalee

    (@marthalee)

    Hi esmi, thanks for your response.

    Since a space could be horizontal or vertical, I wasn’t sure which you meant, so I experimented.

    First I eliminated “margin-right: 1px” from
    #access li:hover > a,
    #access ul ul :hover > a
    and from
    #access ul li.current_page_item > a,
    #access ul li.current_page_parent > a,
    #access ul li.current-menu-ancestor > a,
    #access ul li.current-menu-item > a,
    #access ul li.current-menu-parent > a

    Checked with friend–menus still disappearing!

    Then I changed “margin: 4px 0 1px 0;” to “margin: 0;” on
    #access a

    and THEN the drop-down menus started disappearing for ME! (As well as looking awfully cramped up.)

    So I restored “margin: 4px 0 1px 0” to #access a:. In other words, I’m back to last friend-tested and still-problematic configuration.

    All my CSS errors, as linked above, are the “web-kit-size-adjust” stuff I inherited from Twenty ten–which (along with radius, box-shadow, etc) the W3C folks are pleased to insist do not exist.

    Thread Starter marthalee

    (@marthalee)

    Could I get you to clarify, please, esmi: did you mean that the space to the right and/or left of the links might cause trouble, or did you mean that the top and/or bottom margins of the links might cause trouble?

    It’s almost certainly the top & bottom margins that are the problem. As the mouse moves out of one element and into the margin area, the focus is lost – hence the dropdown menu disappears. Try removing the top & bottom margins and compensating with additional top & bottom padding.

    Thread Starter marthalee

    (@marthalee)

    Thanks for the clarification, esmi. I’m still working on this as I can’t get the problem to happen with ANY browser on my computer….

    I also have a problem with WP 3.01 running twenty-ten with no modifications to the theme. I have not “hacked” any of the code.

    The site is http://twogatherbeads.com/

    The MENU for LEARN HOW has a drop down menu consisting of 3 items. If I roll over LEARN HOW, the drop down shows but disappears when scrolling down to access the drop down.

    This occurs on Firefox 3.6.12 running on MAC OSX 10.4.11. There is not a problem on Safari 4.1.2. I see a small horizontal gap between the main menu element ( LEARN HOW) and the drop down when viewing in Firfox. I do not see the gap in Safari.

    Need help in resolving this problem!

    thanks in advance for the help!
    -dan

    Thread Starter marthalee

    (@marthalee)

    What I *THINK* I learned, by the time I fixed my issue, would pertain to you ONLY if you have edited your style.css file.

    What I created, by editing the css, was a combined menu-and-dropdowns styling that was partly pixel-based and partly em-based. (I tend to prefer em-sizing of fonts.) I THINK what was happening was that the em-sizing was not calculated to the same pixel size in all browsers. Browsers of course round, and I believe my problems resulted from a rounding error. For example, a size (line-height, say) in ems might calculate to 20.52 pixels–and the drop-downs work when/if a browser rounds to 21, but the menu would lose focus when/if a browser rounds to 20. (It might also involve different-ly sized versions of the same font on visitors’ computers. I know Palatino was huge, one of the biggest fonts per point size, in the mid-90s, then reappeared in a rather weenie size–I think this may not be terribly uncommon.)

    IF you’ve edited your style.css, I’d suggest you go in and check that EVERYTHING having to do with the navigation bar and dropdowns is specified in pixels–no ems, no percentages, points, words (“smaller”), etc.

    If you have NOT edited your style.css file, it would seem to be a problem for the Twenty Ten task force…. perhaps they will enter in a moment, stage left?

    Good luck to you, dan!

    Thank you! No editing has taken place so……

    I do hope someone comes in from stage right! =)

    I am curious, though, what you see when checking the link.

    http://twogatherbeads.com/

    thanks in advance for your help!

    dan

    @mckinney3: Please post a new topic.

Viewing 9 replies - 1 through 9 (of 9 total)
  • The topic ‘3.01 dropdown menus disappear’ is closed to new replies.