I am trying to design a navigation bar that resembles the one depicted in the image provided.
The concept involves creating a navigation bar where each border is separated from the others, potentially achieved using hr tags. However, I am struggling to figure out how to make it vertical and fit seamlessly within the Nav bar.
.topnav {
background-color: lightgray;
overflow: hidden;
border-top: 1px solid grey;
border-left: none;
border-bottom: none;
}
/* Style the links inside the navigation bar */
.topnav a {
color: #575859;
text-align: center;
display: inline-block;
width: 16.15%;
height: 80px;
text-decoration: none;
font-size: 17px;
border-right: 1px solid grey;
}
/* Change the color of links on hover */
.topnav a:hover {
background-color: #F0191C;
color: white;
}
/* Add a color to the active/current link */
.topnav a.active {
background-color: #4CAF50;
color: white;
}<div class="topnav" id="myTopnav">
<a href="C:\Users\Cdogb\Documents\coursework\year 1\web design\coursework 2\website\index.html">Home</a>
<a href="C:\Users\Cdogb\Documents\coursework\year 1\web design\coursework 2\website\product.html">Products</a>
<a href="#index">Protect</a>
<a href="#index">Stocklist's</a>
<a href="#index">Events</a>
<a href="#reviews">Reviews</a>
</div>