CODEWITHSUNDEEP
htmlcsshyperlink
Pablo Silva
Pablo Silva

Reputation: 45

Color of link doesn't change

I searched on the web and here and didn't find such case. The problem is that I can't change the color of the link. I have the following structure:

 <ul id="footer_menu">
              <li class="footer_title">Sobre</li>
              <li><a href="#">Sobre nós</a></li>
              <li><a href="#">Entre em contato</a></li>
              <li><a href="#">Contribua</a></li>
 </ul>


a {
    text-decoration: none;
    -webkit-transition: all .2s linear;
    -moz-transition: all .2s linear;
    -ms-transition: all .2s linear;
    -o-transition:  all .2s linear;
    transition: all .2s linear;
}

ul#footer_menu li a{
    color: #848587;
}

ul#footer_menu li a:hover {
    color: #FFFFFF;
}

So as you can see, I tried put the most specific path for the links on footer_menu but the color of the links still continue blue and surprising the hover is working correctly.

If anybody could help me. Actually I'm just asking because everything seems be fine. I can't put the color in the first a because no my links will have the same color.

Thank you

Upvotes: -1

Views: 128

Answers (3)

Richa
Richa

Reputation: 3289

Take a look at Fiddle it works completely fine

ul#footer_menu li a{
    color: red;
}

ul#footer_menu li a:hover {
    color: #FFFFFF;
}

Upvotes: -1

wahid
wahid

Reputation: 1150

Try This

<nav id="myslidemenu">
<ul>
<li><a href="what-we-do.html">What we do</a></li>
<li><a  href="our-services.html">Our services</a></li>
<li><a href="who-we-are.html">Who we are</a></li>
<li><a href="case-studies.html">Case studies</a></li>
<li><a href="testimonials.html">Testimonials</a></li>
</ul>
</nav>

CSS 

nav ul li a{ 
    color:#000;
    border-bottom: 1px solid #FFBE08;
   -webkit-transition: border-bottom linear 1s;
   -moz-transition: border-bottom linear 1s;
   -o-transition: border-bottom linear 1s;
    transition: border-bottom linear 1s;
    text-decoration:none;
}

nav ul li a:hover{ color:#000; border-bottom:1px solid #000; }

Upvotes: 2

X287
X287

Reputation: 51

Try this:

ul#footer_menu li a{
    color: #848587 !important;
}

Upvotes: 0

Related Questions