CSS classes are not working

Question

Inheritance is not working. The class navlink_0 is working but the class navlink_1 is not working. It is getting back to the declaration at the beginning of the css file. What is wrong?

My HTML and CSS file:

<div id="menu">
<div id="main_nav">
    <ul class="mainnav">
        <li><a href="top-angebote.html" onfocus="blurLink(this);" class="navlink_0">TOP ANGEBOTE</a>
        </li>
    </ul>
    <ul class="mainnav">
        <li><a href="reifen-komplettraeder.html" onfocus="blurLink(this);" class="navlink_1">REIFEN/ KOMPLETTRÄDER</a>
        </li>
    </ul>
</div>
</div>


#menu
{
   position: relative;
   float:left;
   padding:0px;
   margin:0px;
}

#main_nav
{
   color: #FFF;
   font-size: 12px;
   font-style: italic;
   display: inline-block;
   font-weight: bold;
}

#main_nav .mainnav 
{
   color: #FFF;
   padding:0px;
   margin:0px;
   display: inline-block;
   font-weight: bold;
}

#main_nav ul {
   color: #FFF;
   padding:0px;
   margin:0px;
   list-type:none;
}


#main_nav .mainnav li
{
   color: #FFF;
   padding:0px;
   margin:0px;
   display:inline-block;
}

#main_nav .navlink_0
{
   color: #FFF;
   padding: 10px;
   text-decoration: none;
   line-height: 30px;
   display: inline-block;
   font-weight: bold;
}


#main_nav a.navlink_0:link, a.navlink_0:visited
{
   color: #FFF;
   text-decoration: none;
   background-color: #0863AA;
   background-image: linear-gradient(to bottom, #006EB7 0%, #0863AA 100%);
   background-repeat: repeat-x;
}

#main_nav a.navlink_0:hover, a.navlink_0:active, a.navlink_0:focus
{
   color: #FFF; 
   text-decoration: none;
   background-color:#ac0727;
   background-image:-webkit-gradient(linear,left 0%,left 100%,from(#e4041f),to(#ac0727));
   background-image:-webkit-linear-gradient(top,#e4041f,0%,#ac0727,100%);
   background-image:-moz-linear-gradient(top,#e4041f 0%,#ac0727 100%);
   background-image:linear-gradient(to bottom,#e4041f 0%,#ac0727 100
   background-repeat:repeat-x;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffe4041f',endColorstr='#ffac0727',GradientType=0);color:#ffffff;
}

#main_nav .navlink_1
{
 /* same above like navlink_0
 *  Typo3 Renering navlink_1
 */    
}

#main_nav  a.navlink_1:link, a.navlink_1:visited
{
 /* same above like navlink_0
 *  Typo3 Renering navlink_1
 */   
}

#main_nav  a.navlink_1:hover, a.navlink_1:active, a.navlink_1:focus
{
 /* same above like navlink_0
 *  Typo3 Renering navlink_1
 */   
}

Answer 1

Your CSS is broken, look that line :

background-image:linear-gradient(to bottom,#e4041f 0%,#ac0727 100

Missing %); :

background-image:linear-gradient(to bottom,#e4041f 0%,#ac0727 100%);

So CSS encounter an error, it stops rendering there, that's why .navlink_1 doesn't render properly.

I would heavily recommend to clean up your CSS :)

Answer 2

Try this

#main_nav .navlink_0, .navlink_1
{
    color: #FFF;
    padding: 10px;
    text-decoration: none;
    line-height: 30px;
    display: inline-block;
    font-weight: bold;
}

#main_nav a.navlink_0:link, a.navlink_0:visited, a.navlink_1:link, a.navlink_1:visited
{
    color: #FFF;
    text-decoration: none;
    background-color: #0863AA;
    background-image: linear-gradient(to bottom, #006EB7 0%, #0863AA 100%);
    background-repeat: repeat-x;
}

Answer 3

I suggest that you clean up your html and css. Assuming that you're using HTML5 you can use the nav element. I would also stop using so many ids. They can be nice for javascript but for the most part they're unnecessary.

Much of the CSS is also unnecessary. Why are you declaring the color for every element? Why are you declaring display:inline-block on elements that are already display:inline-block to begin with? If possible you should remove them.

HTML

<div class="menuContainer">
    <nav>
        <ul>
          <li><a href="top-angebote.html" onfocus="blurLink(this);">TOP ANGEBOTE</a></li>
        </ul>
        <ul>
          <li><a href="reifen-komplettraeder.html" onfocus="blurLink(this);">REIFEN/ KOMPLETTRÄDER</a></li>
        </ul>
    </nav>
</div>

CSS

.menuContainer
{
    position: relative;
    float:left;
    padding:0px;
    margin:0px;
} 

nav
{
   color: #FFF;
   font-size: 12px;
   font-style: italic;
   display: inline-block;
   font-weight: bold;
}

nav ul 
{
   color: #FFF;
   padding:0px;
   margin:0px;
   display: inline-block;
   font-weight: bold;
}

nav li
{
   color: #FFF;
   padding:0px;
   margin:0px;
   display:inline-block;
}

nav a
{
   color: #FFF;
   padding: 10px;
   text-decoration: none;
   line-height: 30px;
   display: inline-block;
   font-weight: bold;
}

nav a:link, nav a:visited
{
   color: #FFF;
   text-decoration: none;
   background-color: #0863AA;
   background-image: linear-gradient(to bottom, #006EB7 0%, #0863AA 100%);
   background-repeat: repeat-x;
}

nav a:hover, nav a:active, nav a:focus
{
   color: #FFF; 
   text-decoration: none;
   background-color:#ac0727;
   background-image:-webkit-gradient(linear,left 0%,left 100%,from(#e4041f),to(#ac0727));
   background-image:-webkit-linear-gradient(top,#e4041f,0%,#ac0727,100%);
   background-image:-moz-linear-gradient(top,#e4041f 0%,#ac0727 100%);
   background-image:linear-gradient(to bottom,#e4041f 0%,#ac0727 100);
   background-repeat:repeat-x;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffe4041f',endColorstr='#ffac0727',GradientType=0);
}