Register

If this is your first visit, please click the Sign Up now button to begin the process of creating your account so you can begin posting on our forums! The Sign Up process will only take up about a minute of two of your time.

Results 1 to 2 of 2

Thread: Menu Hover

  1. #1
    Junior Member
    Join Date
    Oct 2009
    Posts
    3
    Member #
    20167
    First off, the site is at Tustin Insurance Agency.

    My question is regarding the drop down menu. What I want to do is have the selected main menu category stay gray while you navigate its sub-menu. As it is, the main menu returns to its original color once you mouse onto the drop down.

    Thanks in advance for any help. This is the css that applies to the menu:

    Code:
    ul.pureCssMenu ul{display:none}
    ul.pureCssMenu li:hover>ul{display:block}
    ul.pureCssMenu ul{position: absolute;left:0px;top:98%;}
    ul.pureCssMenu ul ul{position: absolute;left:98%;top:-2px;}
    
    
    ul.pureCssMenu,ul.pureCssMenu ul {
        margin:0px;
        list-style:none;
        padding:0px 2px 2px 0px;
        background-color:#FFFFFF;
        background-repeat:repeat;
        border-color:#808080;
        border-width:1px;
        border-style:solid;
        }
    ul.pureCssMenu table {border-collapse:collapse}ul.pureCssMenu {
        display:block;
        zoom:1;
        height:21px;
        float: left;
    }
    ul.pureCssMenu ul{
        width:175px;
    }
    ul.pureCssMenu li{
        display:block;
        margin:2px 0px 0px 2px;
        font-size:0px;
    }
    
    ul.pureCssMenu a:active, ul.pureCssMenu a:focus {
    outline-style:none;
    }
    ul.pureCssMenu a, ul.pureCssMenu li.dis a:hover, ul.pureCssMenu li.sep a:hover {
        display:block;
        vertical-align:middle;
        background-color:#FFFFFF;
        border-width:1px;
        border-color:#fff;
        border-style:solid;
        text-align:center;
        text-decoration:none;
        padding:2px 5px 5px 10px;
        _padding-left:0;
        font-size: 12px;
        font-family: Verdana, Arial, sans-serif;
        color: #000;
        text-decoration:none;
        cursor:default;
    }
    ul.pureCssMenu span{
        overflow:hidden;
    }
    ul.pureCssMenu li {
        float:left;
    }
    ul.pureCssMenu ul li {
        float:none;
    }
    ul.pureCssMenu ul a {
        text-align:left;
        white-space:nowrap;
    }
    ul.pureCssMenu li.sep{
        text-align:left;
        padding:0px;
        line-height:0;
        height:100%;
    }
    ul.pureCssMenu li.sep span{
        float:none;    padding-right:0;
        width:3px;
        height:100%;
        display:inline-block;
        background-color:#808080;    background-image:none;}
    ul.pureCssMenu ul li.sep span{
        width:100%;
        height:3px;
    }
    ul.pureCssMenu li:hover{
        position:relative;
    }
    ul.pureCssMenu li:hover>a{
        background-color:#eee;
        border-color:#000;
        border-style:solid;
        font-size: 12px;
        font-family: Verdana, Arial, sans-serif;
        color: #444;
        text-decoration:none;
    }
    ul.pureCssMenu li a:hover{
        position:relative;
        background-color:#eee;
        border-color:#000;
        border-style:solid;
        font-size: 12px;
        font-family: Verdana, Arial, sans-serif;
        color: #444;
        text-decoration:none;
    }
    ul.pureCssMenu li.dis a {
        color: #557D4F !important;
    }
    ul.pureCssMenu img {border: none;float:left;_float:none;margin-right:2px;width:16px;
    height:16px;
    }
    ul.pureCssMenu ul img {width:16px;
    height:16px;
    }
    ul.pureCssMenu img.over{display:none}
    ul.pureCssMenu li.dis a:hover img.over{display:none !important}
    ul.pureCssMenu li.dis a:hover img.def {display:inline !important}
    ul.pureCssMenu li:hover > a img.def  {display:none}
    ul.pureCssMenu li:hover > a img.over {display:inline}
    ul.pureCssMenu a:hover img.over,ul.pureCssMenu a:hover ul img.def,ul.pureCssMenu a:hover a:hover ul img.def,ul.pureCssMenu a:hover a:hover a:hover ul img.def,ul.pureCssMenu a:hover a:hover img.over,ul.pureCssMenu a:hover a:hover a:hover img.over,ul.pureCssMenu a:hover a:hover a:hover a:hover img.over{display:inline}
    ul.pureCssMenu a:hover img.def,ul.pureCssMenu a:hover ul img.over,ul.pureCssMenu a:hover a:hover ul img.over,ul.pureCssMenu a:hover a:hover a:hover ul img.over,ul.pureCssMenu a:hover a:hover img.def,ul.pureCssMenu a:hover a:hover a:hover img.def,ul.pureCssMenu a:hover a:hover a:hover a:hover img.def{display:none}
    ul.pureCssMenu a:hover img.over,ul.pureCssMenu a:hover ul img.def,ul.pureCssMenu a:hover a:hover img.over{display:inline}
    ul.pureCssMenu a:hover img.def,ul.pureCssMenu a:hover ul img.over,ul.pureCssMenu a:hover a:hover img.def{display:none}
    ul.pureCssMenu a:hover ul{display:block}
    ul.pureCssMenu span{
        display:block;
        background-image:url(arrv_white.gif);
        background-position:right center;
        background-repeat: no-repeat;
       padding-right:9px;}
    ul.pureCssMenu ul span{background-image:url(arr_black.gif)}
    ul.pureCssMenu ul li:hover > a span{    background-image:url(arr_white.gif);}
    ul.pureCssMenu table a:hover span{background-image:url(arr_white.gif)}
    ul.pureCssMenu li.pureCssMenui0 {
    width:128.5px;
    height:40px;
    
    }
    
    ul.pureCssMenu li a.pureCssMenui0{
    height:100%;
    vertical-align: middle;
        background-image:url('nav_background.png');
        background-repeat:repeat-x;
    padding-top: 12px;
    border-width:0px;
    font-size: 12px;
    font-family: Verdana, Arial, sans-serif;
    font-variant: small-caps;
    color:#fff;
    }
    ul.pureCssMenu li a.pureCssMenui0:hover{
    padding-top: 12px;
    margin: 0;
    font-size: 12px;
    font-family: Verdana, Arial, sans-serif;
    font-variant: small-caps;
    color:#000;
    background-image:url('nav_background_hover.png');
    background-repeat:repeat-x;
    
    }
    
     ul.pureCssMenum0 {
    background-color:transparent;
    border-width:0px;
        padding:0px 0px 0px 0px;
    }
     ul.pureCssMenum0>li>a {
    padding:8px 10px 0px 10px;
    }
     ul.pureCssMenum0 a {
    padding:8px 10px 0px 10px;
    }
     ul.pureCssMenum0 ul a {
    padding:2px 5px 5px 10px;
    }
     ul.pureCssMenum0>li {
    margin:0px 0px 0px 0px;
    }
     ul.pureCssMenum0 li {
    margin:0px 0px 0px 0px;
    }
     ul.pureCssMenum0 li li {
    margin:2px 0px 0px 2px;
    }

  2.  

  3. #2
    Junior Member
    Join Date
    Nov 2010
    Posts
    5
    Member #
    25094
    Should be something simple like when setting the drop-down menu to visible just set the background-color to gray, than when you set the drop-down to hide, set the background-color to it's original color.


Remove Ads

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
All times are GMT -6. The time now is 05:44 PM.
Powered by vBulletin® Version 4.2.3
Copyright © 2019 vBulletin Solutions, Inc. All rights reserved.
vBulletin Skin By: PurevB.com