CODEWITHSUNDEEP
htmlcss
Tomi
Tomi

Reputation: 179

Changing colour of link in list without altering hover CSS

This menu bar works as it should, until hyperlinks are involved, as the browser inserts its own text formatting.

I tried using the pseudo selectors (a:link a:visited) to counteract this, but that prevents the styling I have already created from showing, (as I want the text to change from grey to white upon hover). I also tried #menubar ul li a:link{} but didn't work. How do I prevent the links from changing colour when they are in lists?

Fiddle here: http://jsfiddle.net/CWB9C/1/

HTML:

<div id="menubar">
    <ul>
        <li><a href="index.html"> Home</a>
        </li>
        <li><a href="www.facebook.com">Facebook</a>

            <ul>
                <li><a href="www.one.com">One</a>
                </li>
                <li><a href="www.two.com">Two</a>
                </li>
                <li><a href="www.three.com">Three</a>
                </li>
            </ul>
        </li>
        <li><a href="www.google.com">Google.com </a>

            <ul>
                <li><a href="www.one.com">One</a>
                </li>
                <li><a href="www.two.com">Two</a>
                </li>
                <li><a href="www.three.com">Three</a>
                </li>
            </ul>
        </li>
        <li>Search</li>
    </ul>
</div>

CSS:

body {
  text-align: center;
}


#menubar ul{
  text-align: left;
  display: inline;
  margin: 0;
  padding: 15px 4px 17px 0;
  list-style: none;
}


#menubar ul li{
  font: 18px;
  display: inline-block;
  margin-right: -4px;
  position: relative;
  padding: 15px 20px;
  background: #fff;
  color:#666;
  text-decoration:none;
}

#menubar ul li{
  font: 18px;
  font-family: latolight;
  display: inline-block;
  margin-right: -4px;
  position: relative;
  padding: 15px 20px;
  background: #fff;
}

#menubar ul li:hover {
    background: #A03C3A;
    color: #D6D6D6;
}

#menubar ul li ul{
  padding: 0;
  position: absolute;
  top: 43px;
  left: 0;
  width: 150px;
  box-shadow: none;
  display: none;
  opacity: 0;
  visibility: hidden;
  color:#666;
  text-decoration:none;
}

#menubar ul li ul {
  padding: 0;
  position: absolute;
  top: 43px;
  left: 0;
  width: 150px;
  display: none;
  opacity: 0;
  visibility: hidden;
}
#menubar ul li ul li { 
background:#A03C3A;
  display: block; 
  color: #FFF;
}

#menubar ul li ul li { 
background:#A03C3A;
  display: block; 
  color: #FFF;
  text-shadow: 0 -1px 0 #000;
  z-index:10;
   color:#666;
  text-decoration:none;
}

#menubar ul li ul li:hover {
    background:#4F529F; z-index:10;
}

#menubar ul li:hover ul {
  display: block;
  opacity: 1;
  visibility: visible;
  z-index:10;
}

Upvotes: 1

Views: 2745

Answers (5)

Brigand
Brigand

Reputation: 86220

You can use the inherit value for color.

#menubar ul li a {
    color: inherit;
}

Then it will inherit from the closest parent with a color style. You can then do something like this for the colors.

#menubar ul li ul li {
    color: black;
}

menu demo

fiddle

(nice menu by the way)

Upvotes: 0

Andrei Terecoasa
Andrei Terecoasa

Reputation: 572

Style the a's not li's, or just set to all the a's 

a { color:inherit; text-decoration:none; }

Upvotes: 1

saad arshad
saad arshad

Reputation: 259

#menubar ul li:hover a{
    color:#fff;
}

Upvotes: 0

CSharpMinor
CSharpMinor

Reputation: 232

From what I'm reading, I think this is what you want

#menubar a {
    color: #whatevershadeofgrayhere;
    text-decoration: none;
}
#menubar a:hover {
    color: #whatevershadeofwhitehere;
}

Upvotes: 0

Tchoupi
Tchoupi

Reputation: 14681

Just create a style that will apply to both li and li > a:

#menubar ul li, #menubar ul li a {
    color:#666;
    font: 18px;
    font-family: latolight;
    text-decoration: none; 
    /* Add whatever additional style you want */
}

jsFiddle

Upvotes: 0

Related Questions