Hoverable menu items - html

Question

I have a menu with different items, these items are returned from a controller, and looks like this.
#foreach (var item in ViewBag.LoggedIn)
{
if (item.Url == path)
{
<li><a class="active" href="#item.Url">#item.Text</a></li>
}
else
{
<li>#item.Text</li>
}
<li class="slider"></li>
}
It is the "li" at the end, which is of class="slider" which is the "hover/slider" I somehow have to define the starting position of that slider.
The hovering is defined like this in the css.
.menu li:nth-child(1):hover ~ .slider,
.menu li:nth-child(1):focus ~ .slider,
.menu li:nth-child(1):active ~ .slider {
left: 0;
background-color: #3498db;
}
.menu li:nth-child(2):hover ~ .slider,
.menu li:nth-child(2):focus ~ .slider,
.menu li:nth-child(2):active ~ .slider {
left: 20%;
background-color: #9b59b6;
}
and so on.
The selected link is defined as active after the button is pushed. The problem is that the "hover/slider" starts at the left side.
This is illustrated in the picture below. In that example About is clicked, but the "hover/slider" starts at Home, which is kinda weird.
I would like to know how I could make the slider/hover (which is at Home in the image) to be where the link is active (About)
The generated HTML is provided below.
<ul class="menu">
<li>
Home
</li>
<li>
Contact
</li>
<li>
<a class="active" href="/Home/About">About</a>
</li>
<li>
Register
</li>
<li>
Log in
</li>
<li class="slider" id="menu_slider"></li>
</ul>
When implementing the slider in the answer I get the following error (the red line is not supposed to be covering the entire menu, just the selected link)

Answer 1

Here is what I understand from your question: You want to move your "slider" under the link that is currently active or hovered. If this is what you want then I have a solution for you.
Since you didn't provide your CSS properties for the rest of the menu, I am using my own CSS properties to achieve this.
Instead of moving the "slider", I am using the padding-bottom property to move the slider. When you run this in your browser, it simulates as if it moved the "slider"
.menu li a.active,
.menu li a:hover {
background-color: #E74C3C;
padding-bottom: 20px;
position: relative;
z-index: 1;
}
Here is the complete solution in code snippet below. Do let me know if this isn't what you wanted and I will update my answer.
.menu {
flex-direction: row;
padding-left: 0;
margin-bottom: 0;
list-style: none;
display: flex;
}
.menu li:not(.slider) {
box-sizing: border-box;
background: #2C3E50;
width: 100%;
}
.menu li a {
color: white;
text-decoration: none;
display: block;
padding: 1rem;
}
.menu li a.active,
.menu li a:hover {
background-color: #E74C3C;
padding-bottom: 20px;
position: relative;
z-index: 1;
}
.menu .slider {
height: 5px;
width: calc(100% - 1rem);
position: fixed;
margin-top: 50px;
background: #D6F1FF;
}
<ul class="menu">
<li>
Home
</li>
<li>
Contact
</li>
<li>
<a class="active" href="/Home/About">About</a>
</li>
<li>
Register
</li>
<li>
Log in
</li>
<li class="slider" id="menu_slider"></li>
</ul>