Malphai Malphai - 3 months ago 8
CSS Question

Selecting color when hovering over navbar

So I have this navigation bar that I want to change the color of when hovering over with the mouse. Its default is black, I want it to be lightgrey-white. What have I done wrong here?

HTML:

<!DOCTYPE html>
<html>
<head>
<title>Frontend</title>
</head>
<body>
<div class="container">
<div class="row">
<div class="box">
<div id="header">
<br />
<div id="searchMenu">
<input id="sweBtn" type="button" value="SVENSKA" />
<input id="engBtn" type="button" value="ENGLISH" />
<input id="searchTxt" type="text" />
<input id="searchBtn" type="button" value="SÖK" />
</div>
<br />
</div>
<div class="col-sm-4 text-left" id="imgText">
<h3>Title</h3>
<p>Paragraph</p>
</div>
<div class="col-sm-4">
<img id="imgHeader" src="~/img/Header.png" />
</div>
<div>
<ul id="navBar"> //Here is the navbar I am talking about
<li><a>BEHÖVER DU AVOKAT?</a></li>
<li><a>ADVOKATETIK</a></li>
<li><a>ATT BLI ADVOKAT</a></li>
<li><a>UTBILDNING</a></li>
<li><a>ADVOKATSSAMFUNDET TYCKER</a></li>
</ul>
</div>
</div>
</div>
</div>
<footer>

</footer>
</body>
</html>

<link href="~/Content/custom.css" rel="stylesheet" />


CSS:

ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
}

li {
float: left;
}

li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}

li a:hover {
background-color: #111;
}

#header {
background-color: #503F31;
color: white;
padding: 30px;
}

#searchMenu {
margin-left: 1450px;
}

#sweBtn {
font-family: 'Times New Roman';
background-color: Transparent;
color: grey;
}

#engBtn {
font-family: 'Times New Roman';
background-color: Transparent;
color: gold;
}

#searchTxt {
background-color: grey;
border-color: grey;
}

#searchBtn {
font-family: 'Times New Roman';
background-color: Transparent;
color: gold;
}

#imgText {
font-size: 25px;
position: absolute;
}

#imgHeader {
width: 1904px;
}

#navBar {
font-family: 'Times New Roman';
color: gold;
background-color: #503F31;
}

#footer {
background-color: grey;
color: white;
padding-bottom: -250px;
}

*::selection { /*This should handle the hover color situation right?*/
background: #cc0000;
color: #ffffff;
}
*::-moz-selection {
background: #cc0000;
color: #ffffff;
}
*::-webkit-selection {
background: #cc0000;
color: #ffffff;
}


Also a sidenote: I want for every listitem to be seperated with a vertical line like this: "|"

Answer

Change the li a:hover background-color to #CCC and remove this:

*::selection { /*This should handle the hover color situation right?*/
  background: #cc0000;
  color: #ffffff;
}
*::-moz-selection {
   background: #cc0000;
   color: #ffffff;
}
*::-webkit-selection {
   background: #cc0000;
   color: #ffffff;
}

I'm assuming your #111 isn't 'black' but 'blackish' and therefore, seen as black ;).