Facing an issue with creating a vertical line separator in the navigation menu.
While trying to add a vertical line separator to my navigation, I noticed that it does not get covered by the hover effect when hovering over the menu items. Please refer to the image below for clarification.
https://i.sstatic.net/inPbW.jpg
Any suggestions on how to ensure that the line separator is included in the hover effect?
Here's a snippet of my CSS:
.admin-functions{
background: linear-gradient(#ffffff, #f0f0ff);
border-bottom-left-radius: 5px;
border-bottom-right-radius: 5px;
border: 2px #0A78DC solid;
display: table;
}
.admin-functions a{
text-decoration: none;
display: table-cell;
padding: 5px 10px;
text-align: center;
}
.admin-functions a:hover{
background : linear-gradient(#0abedc, #0a78dc);
color: white;
}
.separator{
border: 1px solid #0a78dc;
margin-left:-2px;
}
And here's a piece of my HTML:
<nav class="admin-functions">
<a href="#">Job Manage</a>
<span class="separator"></span>
<a href="#">Applicant Manage</a>
<span class="separator"></span>
<a href="#">Company Info</a>
</nav>