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 5 of 5
  1. #1
    Senior Member Tyler Smith's Avatar
    Join Date
    Oct 2011
    Posts
    115
    Member #
    29767
    Liked
    7 times
    Hello all,

    This pertains to the drop-down menu on the World Review Group home page. After I coded the transition delay for the drop-down menu for when the mouse leaves the #pMenu div area and when that occurs, the child links take on the styles of the parent list items/links.

    The cause may have to be due somewhat to the following CSS target on the #pMenu drop-down:
    Code:
    #pMenu li:hover li a{
    I think that's it, but I don't know what to change it to. Any suggestions?

    -Tyler

  2.  

  3. #2
    Unpaid WDF Intern TheGAME1264's Avatar
    Join Date
    Dec 2002
    Location
    Not from USA
    Posts
    14,483
    Member #
    425
    Liked
    2783 times
    Try #pMenu li ul li a instead.
    If I've helped you out in any way, please pay it forward. My wife and I are walking for Autism Speaks. Please donate, and thanks.

    If someone helped you out, be sure to "Like" their post and/or help them in kind. The "Like" link is on the bottom right of each post, beside the "Share" link.

    My stuff (well, some of it): My bowling alley site | Canadian Postal Code Info (beta)

  4. #3
    Senior Member Tyler Smith's Avatar
    Join Date
    Oct 2011
    Posts
    115
    Member #
    29767
    Liked
    7 times
    Thank you very much, TheGAME1264

    I have changed my drop-down styles to the following:

    Code:
    @charset "utf-8";
    #pMenu{
        padding:94px 0 0 47px;
        background:url(pMenuBG.gif) no-repeat scroll 50% 39px transparent;
        height:350px;
        z-index:50;
        margin:0 auto;
    }
    
    #pMenu ul{
        margin:0;
        padding:0;
    }
    
    #pMenu li{
        list-style:none;
        float:left;
        margin-right:10px;
        position:relative;
        letter-spacing:2px;
    }
    
    #pMenu li li{
        width:100%;
        padding-top:1px;
        margin-right:2px;
        text-align:left;
        list-style:square;
        list-style-position:inside;
        min-width:140px;
        letter-spacing:1px;
    }
    
    #pMenu a{text-decoration:none;}
    #pMenu li > a{
        color: #FFF;
        text-shadow:1px 1px 3px #000;
        -ms-filter:"progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=90, Color='#000000')";
        min-width:50px;
        padding:3px;
        border:5px groove #BB0013;
        font-size:16px;
        font-weight:bold;
        
        /*begin main gradient*/
        background: #a90329; /* Old browsers */
        background: -moz-linear-gradient(top, #a90329 0%, #8f0222 44%, #6d0019 100%); /* FF3.6+ */
        background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#a90329), color-stop(44%,#8f0222), color-stop(100%,#6d0019)); /* Chrome,Safari4+ */
        background: -webkit-linear-gradient(top, #a90329 0%,#8f0222 44%,#6d0019 100%); /* Chrome10+,Safari5.1+ */
        background: -o-linear-gradient(top, #a90329 0%,#8f0222 44%,#6d0019 100%); /* Opera11.10+ */
        background: -ms-linear-gradient(top, #a90329 0%,#8f0222 44%,#6d0019 100%); /* IE10+ */
        filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a90329', endColorstr='#6d0019',GradientType=0 ); /* IE6-9 */
        background: linear-gradient(top, #a90329 0%,#8f0222 44%,#6d0019 100%); /* W3C */
        /*end main gradient*/
    }
    
    #pMenu a:hover, #pMenu li:hover a, #pMenu a:active, #pMenu li:active a{
              color:#FF0;
              
              /*begin hover gradient top level*/
              background: #a0030b; /* Old browsers */
            background: -moz-linear-gradient(top, #a0030b 0%, #f91d00 100%);         /* FF3.6+ */
            background: -webkit-gradient(linear, left top, left bottom,             color-stop(0%,#a0030b), color-stop(100%,#f91d00)); /* Chrome,Safari4+ */
            background: -webkit-linear-gradient(top, #a0030b 0%,#f91d00 100%); /* Chrome10+,Safari5.1+ */
            background: -o-linear-gradient(top, #a0030b 0%,#f91d00 100%); /* Opera11.10+ */
            background: -ms-linear-gradient(top, #a0030b 0%,#f91d00 100%);                 /* IE10+ */
            filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a0030b', endColorstr='#f91d00',GradientType=0 ); /* IE6-9 */
            background: linear-gradient(top, #a0030b 0%,#f91d00 100%); /* W3C */
    }
        
    #pMenu li > div{
        visibility:hidden;
        opacity:0;
        transition:visibility 0s linear .3s,opacity .3s linear;
        transition-delay:0s;
        position:absolute;
        margin-top:8px;
        border:2px solid #003;
        padding:4px;
        z-index:2;
            
        /*second gradient*/
        background: #9ebcbf; /* Old browsers */
        background: -moz-linear-gradient(top, #9ebcbf 0%, #7c889b 100%); /* FF3.6+ */
        background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#9ebcbf), color-stop(100%,#7c889b)); /* Chrome,Safari4+ */
        background: -webkit-linear-gradient(top, #9ebcbf 0%,#7c889b 100%); /* Chrome10+,Safari5.1+ */
        background: -o-linear-gradient(top, #9ebcbf 0%,#7c889b 100%); /* Opera 11.10+ */
        background: -ms-linear-gradient(top, #9ebcbf 0%,#7c889b 100%); /* IE10+ */
        background: linear-gradient(to bottom, #9ebcbf 0%,#7c889b 100%); /* W3C */
        filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#9ebcbf', endColorstr='#7c889b',GradientType=0 ); /* IE6-9 */
    }
    
    #pMenu li:hover div{visibility:visible; opacity:1; transition-delay:0s;}
    
    #health{width:275px;}
    #insurance{margin-left:-30px; width:260px;}
    #general{margin-left:-78px; width:280px;}
    #dating{margin-left:-87px; width:200px;}
    #education{margin-left:-108px; width:225px;}
    #pLegal{margin-left:-181px; width:225px;}
    
    #pMenu li ul li a{
           color:#039;
           text-decoration:underline;
           text-shadow:none;
           background:none;
           filter:none;
           border:none;
           font-size:12px;
           display:inline;
    }
    #pMenu li:hover li a{
           background:none;
           border:none;
           color:#039;
    }
    #pMenu li:hover li a:hover, #pMenu li:hover li a:focus, #pMenu li:hover li a:active{
        text-decoration:none;
        color:#069;
    }
    
    #pMenu div a:hover, #pMenu div a:focus, #pMenu div a:active{
        color:#0F0;
        background:none;
        filter:none;
        border:none;
    }
    
    #pMenu h3, #pMenu h2{margin:0;}
    #pMenu li li{padding:0 2px 0 0;}
    
    #pMenu h2{
        font-style:bold;
        text-align:left;
        font-size:14px;
        padding-left:3px;
    }
    #pMenu li h2 a{color:#333399; background:none; filter:none; text-decoration:underline;}
    #pMenu li:hover h2 a{color:#333399; background:none; text-decoration:underline;}
    #pMenu li:hover h2 a:hover, #pMenu li:hover h2 a:active, #pMenu li:hover h2 a:focus{color:#33C; text-decoration:none;}
    
    #pMenu h3{
        text-align:left;
        color:#000000;
        font-size:13px;
        padding-left:20px;
    }
    #pMenu li h3 a{color:#333399; background:none; text-decoration:underline;}
    #pMenu li:hover h3 a{color:#333399; background:none; text-decoration:underline;}
    #pMenu li:hover h3 a:hover, #pMenu li:hover h3 a:active{color:#33C; text-decoration:none;}
    
    #pMenu h3 span{
        display:list-item;
        list-style-type:disc;
        list-style-position:inside;
    }

  5. #4
    Unpaid WDF Intern TheGAME1264's Avatar
    Join Date
    Dec 2002
    Location
    Not from USA
    Posts
    14,483
    Member #
    425
    Liked
    2783 times
    It's this section here:
    Code:
    #pMenu li > a{
        color: #FFF;
        text-shadow:1px 1px 3px #000;
        -ms-filter:"progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=90, Color='#000000')";
        min-width:50px;
        padding:3px;
        border:5px groove #BB0013;
        font-size:16px;
        font-weight:bold;
        
        /*begin main gradient*/
        background: #a90329; /* Old browsers */
        background: -moz-linear-gradient(top, #a90329 0%, #8f0222 44%, #6d0019 100%); /* FF3.6+ */
        background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#a90329), color-stop(44%,#8f0222), color-stop(100%,#6d0019)); /* Chrome,Safari4+ */
        background: -webkit-linear-gradient(top, #a90329 0%,#8f0222 44%,#6d0019 100%); /* Chrome10+,Safari5.1+ */
        background: -o-linear-gradient(top, #a90329 0%,#8f0222 44%,#6d0019 100%); /* Opera11.10+ */
        background: -ms-linear-gradient(top, #a90329 0%,#8f0222 44%,#6d0019 100%); /* IE10+ */
        filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a90329', endColorstr='#6d0019',GradientType=0 ); /* IE6-9 */
        background: linear-gradient(top, #a90329 0%,#8f0222 44%,#6d0019 100%); /* W3C */
        /*end main gradient*/
    }
    To override it, try #pMenu li ul > a. Since the UL is a child element, it may override it.

    The other thing you can do, and although it's a bit of extra code it will work, is to assign your top menu items a class (e.g. top-menu) and apply the gradient/filter rules to that class. As long as the submenu items don't have that class, then they'll have their own rules.
    AlphaMare and Tyler Smith like this.
    If I've helped you out in any way, please pay it forward. My wife and I are walking for Autism Speaks. Please donate, and thanks.

    If someone helped you out, be sure to "Like" their post and/or help them in kind. The "Like" link is on the bottom right of each post, beside the "Share" link.

    My stuff (well, some of it): My bowling alley site | Canadian Postal Code Info (beta)

  6. #5
    Senior Member Tyler Smith's Avatar
    Join Date
    Oct 2011
    Posts
    115
    Member #
    29767
    Liked
    7 times
    Here is what I ended up doing:
    I gave up the transition-delay effect in the end because when I would scroll the main-level list-items, the divs would overlap and the menu would become almost entirely useless. I don't know of a way to target just for the case when the user's mouse leaves the main-level list-items area.

    Here are my current styles:
    Code:
    /*******************/
    /*PERSONAL NAV MENU*/
    /*******************/
    #pMenu{
        padding:94px 0 0 47px;
        background:url(pMenuBG.gif) no-repeat scroll 50% 39px transparent;
        height:350px;
        z-index:50;
        margin:0 auto;
    }
    
    #pMenu ul{
        margin:0;
        padding:0;
    }
    
    #pMenu li{
        list-style:none;
        float:left;
        margin-right:10px;
        position:relative;
        letter-spacing:2px;
    }
    
    #pMenu li li{
        width:100%;
        padding-top:1px;
        margin-right:2px;
        text-align:left;
        list-style:square;
        list-style-position:inside;
        min-width:140px;
        letter-spacing:1px;
    }
    
    #pMenu a{text-decoration:none;}
    #pMenu li > a{
        color: #FFF;
        text-shadow:1px 1px 3px #000;
        -ms-filter:"progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=90, Color='#000000')";
        min-width:50px;
        padding:3px;
        border:5px groove #BB0013;
        font-size:16px;
        font-weight:bold;
        
        /*begin main gradient*/
        background: #a90329; /* Old browsers */
        background: -moz-linear-gradient(top, #a90329 0%, #8f0222 44%, #6d0019 100%); /* FF3.6+ */
        background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#a90329), color-stop(44%,#8f0222), color-stop(100%,#6d0019)); /* Chrome,Safari4+ */
        background: -webkit-linear-gradient(top, #a90329 0%,#8f0222 44%,#6d0019 100%); /* Chrome10+,Safari5.1+ */
        background: -o-linear-gradient(top, #a90329 0%,#8f0222 44%,#6d0019 100%); /* Opera11.10+ */
        background: -ms-linear-gradient(top, #a90329 0%,#8f0222 44%,#6d0019 100%); /* IE10+ */
        filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a90329', endColorstr='#6d0019',GradientType=0 ); /* IE6-9 */
        background: linear-gradient(top, #a90329 0%,#8f0222 44%,#6d0019 100%); /* W3C */
        /*end main gradient*/
    }
    
    #pMenu a:hover, #pMenu li:hover a, #pMenu a:active, #pMenu li:active a{
              color:#FF0;
              
              /*begin hover gradient top level*/
              background: #a0030b; /* Old browsers */
            background: -moz-linear-gradient(top, #a0030b 0%, #f91d00 100%);         /* FF3.6+ */
            background: -webkit-gradient(linear, left top, left bottom,             color-stop(0%,#a0030b), color-stop(100%,#f91d00)); /* Chrome,Safari4+ */
            background: -webkit-linear-gradient(top, #a0030b 0%,#f91d00 100%); /* Chrome10+,Safari5.1+ */
            background: -o-linear-gradient(top, #a0030b 0%,#f91d00 100%); /* Opera11.10+ */
            background: -ms-linear-gradient(top, #a0030b 0%,#f91d00 100%);                 /* IE10+ */
            filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a0030b', endColorstr='#f91d00',GradientType=0 ); /* IE6-9 */
            background: linear-gradient(top, #a0030b 0%,#f91d00 100%); /* W3C */
    }
        
    #pMenu li > div{
        visibility:hidden;
        opacity:0;
        transition:visibility 0s linear .3s,opacity .3s linear;
        transition-delay:0s;
        position:absolute;
        margin-top:8px;
        border:2px solid #003;
        padding:4px;
        z-index:2;
            
        /*second gradient*/
        background: #9ebcbf; /* Old browsers */
        background: -moz-linear-gradient(top, #9ebcbf 0%, #7c889b 100%); /* FF3.6+ */
        background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#9ebcbf), color-stop(100%,#7c889b)); /* Chrome,Safari4+ */
        background: -webkit-linear-gradient(top, #9ebcbf 0%,#7c889b 100%); /* Chrome10+,Safari5.1+ */
        background: -o-linear-gradient(top, #9ebcbf 0%,#7c889b 100%); /* Opera 11.10+ */
        background: -ms-linear-gradient(top, #9ebcbf 0%,#7c889b 100%); /* IE10+ */
        background: linear-gradient(to bottom, #9ebcbf 0%,#7c889b 100%); /* W3C */
        filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#9ebcbf', endColorstr='#7c889b',GradientType=0 ); /* IE6-9 */
    }
    
    #pMenu li:hover div{visibility:visible; opacity:1; transition-delay:0s;}
    
    #health{width:275px;}
    #insurance{margin-left:-30px; width:260px;}
    #general{margin-left:-78px; width:280px;}
    #dating{margin-left:-87px; width:200px;}
    #education{margin-left:-108px; width:225px;}
    #pLegal{margin-left:-181px; width:225px;}
    
    #pMenu li li a, #pMenu li:hover li a{
           color:#039;
           text-decoration:underline;
           text-shadow:none;
           background:none;
           filter:none;
           border:none;
           font-size:12px;
           display:inline;
    }
    
    #pMenu li li a:hover, #pMenu li li a:active, #pMenu li:hover li a:hover, #pMenu li:hover li a:active{
        text-decoration:none;
        color:#069;
    }
    
    #pMenu div a, #pMenu div a:hover, #pMenu div a:active{
        color:#0F0;
        background:none;
        filter:none;
        border:none;
    }
    
    #pMenu h3, #pMenu h2{margin:0;}
    #pMenu li li{padding:0 2px 0 0;}
    
    #pMenu h2{
        font-style:bold;
        text-align:left;
        font-size:14px;
        padding-left:3px;
    }
    #pMenu li h2 a{color:#333399; background:none; filter:none; text-decoration:underline;}
    #pMenu li:hover h2 a{color:#333399; background:none; text-decoration:underline;}
    #pMenu li:hover h2 a:hover, #pMenu li:hover h2 a:active{color:#33C; text-decoration:none;}
    
    #pMenu h3{
        text-align:left;
        color:#000000;
        font-size:13px;
        padding-left:20px;
    }
    #pMenu li h3 a{color:#333399; background:none; text-decoration:underline;}
    #pMenu li:hover h3 a{color:#333399; background:none; text-decoration:underline;}
    #pMenu li:hover h3 a:hover, #pMenu li:hover h3 a:active{color:#33C; text-decoration:none;}
    
    #pMenu h3 span{
        display:list-item;
        list-style-type:disc;
        list-style-position:inside;
    }
    /******************/
    /*End Personal Nav*/
    /******************/
    Thanks for your help.


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 04:28 PM.
Powered by vBulletin® Version 4.2.3
Copyright © 2019 vBulletin Solutions, Inc. All rights reserved.
vBulletin Skin By: PurevB.com