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 3 of 3
  1. #1
    New Coder
    Join Date
    Jul 2013
    Posts
    80
    Thanks
    40
    Thanked 0 Times in 0 Posts

    Question My hover effects disappear as you move down to submenu, how can this be fixed?

    I have
    Code:
    #nav a:hover {border-top: solid 4px #b7c3e6; color: #b7c3e6;}
    for my navigation links and
    Code:
    #topNav nav .folder .subnav {position: absolute; top: 100%; left: 0px; background: #ffffff; height: 0; overflow: hidden; opacity: 1; z-index: 999; }
    for my sub-menus.

    The issue is when you hover over the top-nav links, it works fine, but as you hover down to the sub menu, the hover effects disappear on the main navigation links. How can I code it so these two main nave links keep the hover effects as you move down the sub-menus?

  • #2
    Senior Coder
    Join Date
    Feb 2009
    Location
    Ilkley, West Yorkshire, UK
    Posts
    2,950
    Thanks
    9
    Thanked 724 Times in 718 Posts
    Have a try changing this:

    Code:
    #nav a:hover {border-top: solid 4px #b7c3e6; color: #b7c3e6;}
    to this:

    Code:
    #nav li:hover > a{border-top: solid 4px #b7c3e6; color: #b7c3e6;}
    That changes the hover behaviour from affecting just hovered links to affecting immediate children links of hovered lis, which gives you what you want I think.
    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

  • Users who have thanked SB65 for this post:

    jddowell (09-11-2013)

  • #3
    New Coder
    Join Date
    Jul 2013
    Posts
    80
    Thanks
    40
    Thanked 0 Times in 0 Posts
    Thank you Sir! I appreciate the help.


  •  

    Tags for this Thread

    Posting Permissions

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