I have been struggling to recreate a navigation bar that matches the design in the image provided below. Despite my efforts, I have only managed to come up with the code below. The method I used was inspired by a solution found on Stack Overflow, but I am unsure how to incorporate links and borders to mimic the desired look. Additionally, please note that the orange line beneath the navigation bar is not meant to be included. I do have a PSD Photoshop file containing elements of the navigation bar, which served as the basis for the nav_border.png image.
Here is my HTML code:
<div id="navbar">
<ul>
<li><a href="index.html">First time at auction ?</a></li>
<li><a href="index.html">Next auctions</a></li>
<li><a href="index.html">Rules</a></li>
<li><a href="index.html">Terms of use</a></li>
<li><a href="index.html">FAQ</a></li>
<li><a href="index.html">Contacts</a></li>
<li></li>
</ul>
</div>
This is my current CSS code:
#navbar {
float: left;
width: 776px;
height: 40px;
border-radius: 8px 8px 0 0;
background-color: #003366;
}
#navbar ul {
list-style-type: none;
}
#navbar li {
float: left;
}
#navbar a {
color: white;
text-decoration: none;
}
#navbar li + li{
background:url('nav_border.png') no-repeat top left;
padding-left: 10px;
margin-left: 30px;
}