I have a menu with a black background and a submenu with a grey background.
Now, I want to add a pixel-perfect divider between them.
However, I'm unsure of which border color to use in order to achieve this perfection. Can anyone provide some guidance?
Below is the HTML code snippet:
<!DOCTYPE html>
<html>
<body>
<div class="mainnav">
<p>This is the main navigation</p>
</div>
<div class="subnav">
<p>This is the sub navigation</p>
</div>
</body>
</html>
And here is the corresponding CSS:
.mainnav {
width: 100%;
height: 60px;
background-color: #000000;
color: #ffffff;
text-align: center;
}
.mainnav p {
padding-top: 20px;
}
.subnav p {
padding-top: 10px;
}
.subnav {
width: 100%;
height: 45px;
background-color: #333;
color: #ffffff;
text-align: center;
}
If you'd like to view the interactive example, please visit my jsfiddle link here:
Thank you for your assistance.