mohamed saed mohamed saed - 4 months ago 7
HTML Question

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>




Answer

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;
}