I'm trying to modify the color of my navigation bar when hovering over it with the mouse. Currently, it's black but I want it to change to a light grey or white color. What am I missing 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;
}
Also, as a side note: I would like each list item to be separated by a vertical line, such as "|".