CSS3 fade effect menu doesn't work on child theme

  • Resolved frenchsam

    (@frenchsam)


    11 years, 5 months ago

    Hi there,

    I just made a child theme from twentyten.

    I’ve a drop-down menu which appears in fade transition with CSS3.

    Everything works except the fade effect on my style.css child-stylesheet.

    I tried to put the “css menu code” in parent-css-stylesheet and fade effect come back.

    How can I manage to make it work in child theme ?

    here’s the ccs code : 

    #cssmenu ul { margin: 0; padding: 0;}
#cssmenu li { margin: 0; padding: 0;}
#cssmenu a { margin: 0; padding: 0;}
#cssmenu ul {list-style: none;}
#cssmenu a {text-decoration: none;}
#cssmenu {height: 70px; background-color: rgb(35,35,35); box-shadow: 0px 2px 3px rgba(0,0,0,.4); display: block; float: left; margin: 0 auto; width: 940px;}

#cssmenu > ul > li {
    float: left;
    margin-left: 15px;
    position: relative;
}

#cssmenu > ul > li > a {
    color: rgb(160,160,160);
    font-family: Verdana, 'Lucida Grande';
    font-size: 15px;
    padding: 15px 20px;
-webkit-transition: color .15s;
   -moz-transition: color .15s;
     -o-transition: color .15s;
        transition: color .15s;
}

#cssmenu > ul > li > a:hover {color: rgb(205,113,36); }

#cssmenu > ul > li > ul {
    opacity: 0;
    visibility: hidden;
    padding: 16px 0 20px 0;
    background-color: rgb(250,250,250);
    text-align: left;
    position: absolute;
    top: 55px;
    left: 50%;
    margin-left: -90px;
    width: 180px;
-webkit-transition: all .3s .1s;
   -moz-transition: all .3s .1s;
     -o-transition: all .3s .1s;
        transition: all .3s .1s;
-webkit-border-radius: 5px;
   -moz-border-radius: 5px;
        border-radius: 5px;
-webkit-box-shadow: 0px 1px 3px rgba(0,0,0,.4);
   -moz-box-shadow: 0px 1px 3px rgba(0,0,0,.4);
        box-shadow: 0px 1px 3px rgba(0,0,0,.4);
}

#cssmenu > ul > li:hover > ul {
    opacity: 1;
    top: 65px;
    visibility: visible;
}

#cssmenu > ul > li > ul:before{
    content: '';
    display: block;
    border-color: transparent transparent rgb(250,250,250) transparent;
    border-style: solid;
    border-width: 10px;
    position: absolute;
    top: -20px;
    left: 50%;
    margin-left: -10px;
}

#cssmenu > ul ul > li { position: relative;}

#cssmenu ul ul a{
    color: rgb(50,50,50);
    font-family: Verdana, 'Lucida Grande';
    font-size: 13px;
    background-color: rgb(250,250,250);
    padding: 5px 8px 7px 16px;
    display: block;
-webkit-transition: background-color .1s;
   -moz-transition: background-color .1s;
     -o-transition: background-color .1s;
        transition: background-color .1s;
}

#cssmenu ul ul a:hover {background-color: rgb(240,240,240);}

#cssmenu ul ul ul {
    visibility: hidden;
    opacity: 0;
    position: absolute;
    top: -16px;
    left: 206px;
    padding: 16px 0 20px 0;
    background-color: rgb(250,250,250);
    text-align: left;
    width: 160px;
-webkit-transition: all .3s;
   -moz-transition: all .3s;
     -o-transition: all .3s;
        transition: all .3s;
-webkit-border-radius: 5px;
   -moz-border-radius: 5px;
        border-radius: 5px;
-webkit-box-shadow: 0px 1px 3px rgba(0,0,0,.4);
   -moz-box-shadow: 0px 1px 3px rgba(0,0,0,.4);
        box-shadow: 0px 1px 3px rgba(0,0,0,.4);
}

#cssmenu ul ul > li:hover > ul { opacity: 1; left: 196px; visibility: visible;}

#cssmenu ul ul a:hover{
    background-color: rgb(205,113,36);
    color: rgb(240,240,240);
}

    Thanks you for help !

Viewing 6 replies - 1 through 6 (of 6 total)
  • Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    11 years, 5 months ago

    Perhaps use more specific selectors.

    Thread Starter frenchsam

    (@frenchsam)

    11 years, 5 months ago

    Thanks for your help Andrew. That’s the deal.

    You remind me that the parent stylesheet still have basic code menu, I commented it, and the fade effect come back, called by child stylesheet.

    Now my problem is : I don’t want to touch the core of the theme, and I don’t know how to use more specifics selectors (I didn’t code this menu, I’m a neophyte)

    What can I do then ? (That answer makes my almost making fun of myself…)

    I apologize for bad english, that’s not my native langage.

    WPyogi

    (@wpyogi)

    11 years, 5 months ago

    If you post a link to your site, someone can likely give you specific help. Otherwise, look up how CSS selectors work, and try using Firebug to help you identify the code to use.

    Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    11 years, 5 months ago

    For example, these are more specific selectors

    body header #cssmenu ul ul a {

    I don’t actually know your HTML structure so the above example is likely to be wrong and still not specific enough.

    Here’s an article on CSS specificity.

    I don’t know if you’re using a Browser Inspector Tool (e.g Firebug) already to find your HTML & CSS easily, are you?

    Thread Starter frenchsam

    (@frenchsam)

    11 years, 5 months ago

    @WPPyogi : hi. I’ve installed “Absolut Privacy” plugin because the site still in development but there’re login ID :

    http://www.grossebanane.net16.net/

    username : guest
    pw : test

    Yes I actually use the native “Firebug” in Google Chrome

    @andrew : I know some things about developpement, and I know what selectors are, but in that case with child-parent theme I’m kinda disappointed. Have a look on my site if you have time.

    nb : I’ve restored the parent css. Then the fade effect doesn’t work.

    Thanks for helping !

    Thread Starter frenchsam

    (@frenchsam)

    11 years, 5 months ago

    I finally find out how to do, thanks for your help !

Viewing 6 replies - 1 through 6 (of 6 total)
  • The topic ‘CSS3 fade effect menu doesn't work on child theme’ is closed to new replies.