Results 1 to 3 of 3

Thread: Slight trouble with drop-down menu mouseout

  1. #1
    Join Date
    Jul 2011

    Slight trouble with drop-down menu mouseout


    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:


    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?


  2. #2
    Join Date
    Sep 2009
    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?


    HTML Code:
    ul#naver > li
    Got jQuery problem? jQuery vault can help you find solutions. Give it a try and find out.

    Click jQuery vault to help us help you.

  3. #3
    Join Date
    Jul 2011
    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