Question

I have created a html/css template to be used within a CMS.

I have a specific class:

My Template:

<li><a class="signup" href="#">SIGN UP</a></li>

CMS Generated HTML:

<li class="signup last"> 

        <a href="http://hostone.co.nz">SIGN UP</a> 
    </li>

How could I change my CSS so it will work with the li and not the a tag?

CSS:

#mainMenu .signup{
    background-color:#69c21c;
    height:50px;
    margin-left:360px;
   -webkit-border-top-right-radius:2px;
    -webkit-border-bottom-right-radius:2px;
    -moz-border-radius-topright:2px;
    -moz-border-radius-bottomright:2px;
}

#mainMenu .signup:hover{
    background-color:#00afd8;
}

Answer 1

Assuming you’re still trying to apply the rules to the a, use these:

#mainMenu .signup a {
    background-color:#69c21c;
    height:50px;
    margin-left:360px;
   -webkit-border-top-right-radius:2px;
    -webkit-border-bottom-right-radius:2px;
    -moz-border-radius-topright:2px;
    -moz-border-radius-bottomright:2px;
}

#mainMenu .signup a:hover {
    background-color:#00afd8;
}

If you’re literally trying to apply them to the li, you don’t need to do anything; the li is already being generated with the class.