dcsimg
www.webdeveloper.com
Results 1 to 3 of 3

Thread: Slight trouble with drop-down menu mouseout

Hybrid View

  1. #1
    Join Date
    Jul 2011
    Posts
    9

    Slight trouble with drop-down menu mouseout

    Hello!

    I'm one of those JS cut-and-pasters with only a basic idea of how the code actually works

    So I have this drop-down menu #navbar. When users hover over it, the background color turns from white to black, and the text changes from black to white. When users mouse off the top <li> to the drop-down <ul><li>, I want the #navbar <li> background to remain black and the text to remain white. It turns back to black text on white background when users mouse off it to navigate the drop-down menu. I'm concerned that users might not realize the connection between the menu headers and their sub-items. I know this is a JS issue, but I'm having trouble fixing it.

    Here is my a demo of my site. You can see the HTML and CSS here:

    http://www.harrisonownbey.com

    And here's the JS I'm using (along with regular jQuery).

    $('#navbar > li').hover(function() {
    $('> ul', this).toggle()
    });
    $('#navbar > li > ul > li').hover(function() {
    $('> ul', this).toggle();
    });

    Any suggestions to make the #navbar <li> stay black-backgrounded and white-texted when its sub-menu drops down?

    Thanks!

  2. #2
    Join Date
    Sep 2009
    Posts
    159
    Since the vertical drop-down unordered list items are still direct child elements #navbar, can't you just use CSS on them when hovered to solve the issue here?

    Like

    HTML Code:
    <style>
    ul#naver > li
    {
         color:white;
         background:black;
    }
    </style>

  3. #3
    Join Date
    Jul 2011
    Posts
    9
    I tried the code below, but it didn't do anything.

    ul#navbar > li hover {
    color: #ffffff;
    background-color: #000000;
    }

    I don't think this is a CSS issue as much as I think it is a JS issue. I want the top tab to stay black when users are mousing though the black and white submenu. How could I adjust that in the JS code?

    Thanks for your help though.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

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
  •  
HTML5 Development Center



Recent Articles