Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 4 of 4
  1. #1
    Regular Coder
    Join Date
    Jul 2008
    Posts
    108
    Thanks
    31
    Thanked 0 Times in 0 Posts

    sub menu nav disappearing on hover

    Please see URL: http://backstageweb.net/woodensun/

    Please mouse over any of the nav items with a sub menu (with the down arrows; 'what we sell,' 'what we do,' etc.) The mouseover behavior of these menus is flakey (and doesn't seem to matter which browser you're using). About half the time, the mouseover hover "holds" to drill down to the child menus, and about half the time it doesn't, i.e., the child menus disappear before you can land on any submenu items and you have to repeat. I can only guess this is being caused by something missing or conflicting in the .css (needs additional property somewhere?) but I have no idea what.

    Any help appreciated - thanks!

    John

  • #2
    Senior Coder
    Join Date
    Feb 2009
    Location
    Ilkley, West Yorkshire, UK
    Posts
    2,952
    Thanks
    9
    Thanked 724 Times in 718 Posts
    I think you just haven't got the ul positioned high enough, so if you move the cursor slowly from the li to the ul there's a point where the cursor is not over either the li or the ul, the :hover state is lost and the ul disappears.

    Have a try with:

    Code:
    ul.dropdown ul {
        left: 0;
        position: absolute;
        top: 35px;
        visibility: hidden;
        width: 100%;
        z-index: 1000;
    }

  • Users who have thanked SB65 for this post:

    johndove523 (07-30-2012)

  • #3
    Senior Coder
    Join Date
    Jun 2008
    Location
    New Jersey
    Posts
    2,535
    Thanks
    45
    Thanked 259 Times in 256 Posts
    Looking at your CSS, there is a slight gap between your span (which you seem to have the hover effect on), and the dropdown menu, so if the mouse pauses there too long, it hides it. You shouldn't have the span trigger the show: the span element should be the full height/width of the parent or it should be the parent who triggers the hover.

  • Users who have thanked Keleth for this post:

    johndove523 (07-30-2012)

  • #4
    Regular Coder
    Join Date
    Jul 2008
    Posts
    108
    Thanks
    31
    Thanked 0 Times in 0 Posts
    Thanks very much guys! SB, the slight change in the top: position seems to have done it, and Keleth, I'll look into your suggestion as well. This is not one of my sites, just one I was hired to do some maintenance on. The nav .css was a total mess, calling three different stylesheets, each containing many duplicate styles, but with different properties!

    Thanks again for your help guys!


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •