I'm looking to add a colored bar below my navigation menu but I'm unsure of the correct method to do so.
What I need:
EDIT: I also need guidance on how to position the navigation menu at 50% of the height of the logo. Currently, I have used a 'static' margin-top of 20px, but I'm not sure if this is the best approach. Here's an image for reference: i.imgur.com/ApihCfJ.png
HTML
<div id="menu">
<ul>
<li><a href="/home/" title="Home">Home</a></li>
<li><a href="/over-ons/" title="Over ons">Over ons</a></li>
<li><a href="/producten/" title="Producten">Producten</a></li>
<li><a href="/contact/" title="Contact">Contact</a></li>
</ul>
</div>
CSS
#menu {
margin-top:40px;
}
#menu ul {
list-style-type: none;
}
#menu ul li {
display: inline;
}