CODEWITHSUNDEEP
htmlcss
user4892911
user4892911

Reputation:

CSS issue with ul li a list

I was working on building the UI and I have just got a really weird problem.

The list never gets color, never removes the underline.

/*############## Start Mine Style ##############*/

body{
  background-color: #fff;
}

.contaner{
  width: 1170px;
  margin: auto;
}

/*############## End Mine Style ##############*/

/*Start Header*/
.header{
  background-color: #666;
  height: 20px;
}
/*End Header*/

/*Start Navbar*/
.navbar{
  background-color: #252f31;
  padding: 0;
  color: #fff;
}
.navbar ul{
  list-style: none;
  overflow: hidden;
  padding: 0;
  display: inline-block;
  color: #fff;
  text-decoration: none; 
}
.navbar ul li{
  float: left;
  padding: 20px;
  color: #fff;
}
/*End navbar*/
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>PsdToHtml-1!</title>
        <link rel="stylesheet" href="css/style.css">
        <link rel="stylesheet" href="css/normalize.css">
    </head>
    <body>
        <div class="header">
            <div class="slider">
                Slider
            </div>
        </div>
        <div class="navbar">	
            <ul>
                <li><a href="">Raw</a></li>
                <li><a href="">Raw</a></li>
                <li><a href="">Raw</a></li>
                <li><a href="">Raw</a></li>
                <li><a href="">Raw</a></li>
                <li><a href="">Raw</a></li>
                <li><a href="">Raw</a></li>
                <li><a href="">Raw</a></li>
            </ul>
        </div>
    </body>
</html>

Upvotes: 1

Views: 1420

Answers (1)

1sloc
1sloc

Reputation: 1180

You are styling the li elements, but not the a elements.

Try to add this rule:

.navbar ul li a {
    color: inherit;
    text-decoration: none;
}

Upvotes: 6

Related Questions