SitePoint Sponsor

User Tag List

Results 1 to 2 of 2
  1. #1
    SitePoint Enthusiast
    Join Date
    Jun 2008
    Posts
    44
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question Keep Active Background on LI Hover?

    I am using jquery for the dropdown and i want to be able to display background-color / image when
    i hover over my list item and so it stay active when the submenu shows and goes off when the mouse moves off it
    I am not sure if this will require changes to my JS and Html could someone help me with this, thanks.

    I have put the page on jsfiddle with that you can see the live code and make changes etc.

    LIVE CODE
    http://jsfiddle.net/datastream/REJG2/3/

    here is the same code-

    JS
    Code JavaScript:
    $(function () {
    $('.dropdown').each(function () {
    $(this).parent().eq(0).hover(function () {
    $('.dropdown:eq(0)', this).show();
    }, function () {
    $('.dropdown:eq(0)', this).hide();
    });
    });
    });

    HTML
    Code HTML4Strict:
    <div class="navBG">
    <ul id="nav-container" name="nav-container">
    <li class="active-link"><a href="#"><span>Home</span></a></li>
     
    <li><a href="#"><span>Products</span></a>
    <ul class="dropdown">
    <li><a href="#"><span class="subtxt">Menu item 2</span></a></li>
    <li><a href="#"><span class="subtxt">Menu item 2</span></a></li>
    <li><a href="#"><span class="subtxt">Menu item 2</span></a></li>
    <li><a href="#"><span class="subtxt">Menu item 2</span></a></li>
    <li><a href="#"><span class="subtxt">Menu item 2</span></a></li>
    <li><a href="#"><span class="subtxt">Menu item 2</span></a></li>
    </ul>
    </li>
     
     
     
    <li><a href="#"><span>Menu</span></a></li>
    <li><a href="#"><span>About</span></a></li>
    <li><a href="#"><span>Contact</span></a></li>
    </ul><!--nav-container-->
    </div>


    Code CSS:
    /* NAV
    *************************/
    .navBG {
        background-color: #0A5319;
        height: 100px;
        width: 900px;
        margin: 0 auto;
        background-repeat: repeat-x;
    }
    #nav-container  {
        display: block;
        width: 900px;
        float: right;
        position: relative;
        left: 120px;
        top: 0px;
    }
    #nav-container li a span {
        display: inline;
        height: 36px;
        padding-top: 12px;
        padding-left: 13px;
        padding-right: 14px;
        float: left;
    }
    #nav-container .active-link span   {
        background-color:#ccc;
        background-repeat: repeat-x;
        display: block;
        color: #000;
     
    }
     
    #nav-container li a:hover span {
        display: block;
        background-color:#ccc;
        background-repeat: repeat-x;
    }
     
    #nav-container li  {
        list-style-type: none;
        display: inline;
    }
     
    #nav-container li a {
        list-style-type: none;
        color: #FFF;
        font-size: 14px;
        font-family: "Myriad Pro";
        text-decoration: none;
        float: left;
        padding-left: 8px;
    }
    #nav-container li a:hover {
        color: #575757;
    }
    /* NAV
    *************************/
     
    /* NAV DROPDOWN
    *************************/
     
    ul.dropdown
    {
        margin: 0;
        padding: 0;
        display: block;
        position: absolute;
        z-index: 9999;
        top: 100%;
        width: 300px;
        display: none;
        left: 80px;
        background-color: #eee;
        font-size: 11px;
        height: 90px;
    }
     
    ul.dropdown ul.dropdown
    {
        top: 0px;
        left: 95%;
    }
     
     
    ul.dropdown li
    {
        margin: 0;
        padding: 0;
        float: none;
        position: relative;
        list-style: none;
        display: block;
        color: #3C3C3C;
        line-height:20px !important;
    }
     
    ul.dropdown li a
    {
        display: block;
        color: #3C3C3C;
        font-size: 11px;
    }
    ul.dropdown li a span {
        font-size: 11px;
        color: #3C3C3C;
    }
    ul.dropdown li  a .subtxt{
        font-size: 11px;
        color: #3C3C3C;
        height:20px;
        background: none !important;
        z-index: 5;
    }
    ul.dropdown li a:hover .subtxt {
        font-size: 11px;
        color: #060;
        background-repeat: repeat-x;
        background-position: bottom;
        background: none !important;
        text-decoration:underline;
    }
     
    /* NAV DROPDOWN
    *************************/

  2. #2
    SitePoint Guru
    Join Date
    Jan 2007
    Posts
    967
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    The way to do this is to make the drop down links block elements and add all the background colors and padding to the link element. Then you just need to apply the color change to the a:hover. By the way you don't need to use the 'dropdown' class. Just 'ul ul'. less is more.

    E


Tags for this Thread

Bookmarks

Posting Permissions

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