Web Analytics Made Easy -
StatCounter Dropdown Menu problem with time delay on submenu JS problem? - CodingForum


No announcement yet.

Dropdown Menu problem with time delay on submenu JS problem?

  • Filter
  • Time
  • Show
Clear All
new posts

  • Dropdown Menu problem with time delay on submenu JS problem?


    I am using the horizontal linear dropdown menu that I got from this site: http://www.lwis.net/free-css-drop-down-menu/.

    My problem is that when you hover over the parent link ("The Expeditions" "The Experience", etc.., the submenu doesn't stay "activated" long enough to scroll down and over the submenu link and click it. I think this must be a js issue as it is related to timing, but I am unsure. Any help would be richly rewarded!

    here is the test site: http://www.expeditionwild.com/TEMPLA...ER_FOOTER.html

    I am trying two different menu bars on this test site,

    lwis.celebrity.horizontal (top dd menu) and

    simple.linear (bottom dd menu)

    Thanks for any suggestions so I can use this awesome menu bar. I am using a MacBook Pro and the menus won't work on Safari or Camino at all, and almost work on FF. and Yes, I am a beginner coder.

  • #2
    wow! 27 views and no one has any ideas? Yikes!


    • #3
      Do you have the original Menu structure (Code)? When I look through the source, it appears that some elements of code are missing from the server.

      You say you got that menu off that site. Do you have a direct link?


      • #4
        The problem isn't with your javascript, it's with your css. At present, when you move the mouse downwards towards the dropdown, you exit the <li> element before you get to the child <ul>, and at this point the :hover pseudo-class no longer applies and the dropdown disappears.

        Try making this change:

        ul.dropdown li.dir {
            padding: 0 20px 10px 10px;
        Adding this padding extends the area that the <li> covers so that there is not gap between it and the dropdown - consequently you can mouse (at least in FF) between the li and the dropdown without losing the :hover.
        Use the W3C HTML Validator and CSS Validator to check your code and Firebug to see what css is applied to an element
        Read Steve Krug's book Don't Make Me Think - essential reading on web usability
        I don't recommend much, but I do recommend Clook for UK web hosting


        • #5

          Amazing! You've solved it. One single digit is all it took to fix this issue. Many many thanks!