Hover before spans entire height of page for menu items - html

Question

I'm working on a left nav. I want the red bar to appear before menu items when hovering. It works good for the Home item and its sub items but the other root items cause the red bar to span the entire width of the page, from top to bottom, when hovering.
$(document).foundation();
.vertical.dropdown.menu [href] > i {
display: block;
}
.vertical.dropdown.menu [href] {
display: block;
text-align: center;
}
.left-bar {
position: fixed;
top: 0;
left: 0;
width: 150px;
height: 100%;
color: #333;
background: #FFFFFF;
}
.left-bar .vertical.menu.nested {
padding: 0;
}
.left-bar [href] > i {
display: block;
}
.left-bar [href] {
display: block;
text-align: left;
padding: 0;
color: #333;
}
.left-bar [href]:hover {
background: #9B9B9BFF;
}
.left-bar .vertical.menu > li {
position: relative;
background: #FFFFFF;
color: #333;
border: 0;
}
.left-bar .top-level-item [href]:hover::before {
content: "";
position: absolute;
left: 0;
top: 0;
bottom: 0;
width: 5px;
background-color: red;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/material-design-iconic-font/2.2.0/css/material-design-iconic-font.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/foundation/6.5.0/css/foundation.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/foundation/6.5.1/js/foundation.min.js"></script>
<ul class="vertical dropdown menu left-bar" data-dropdown-menu>
<li class="top-level-item">
<a href="#">
<i class="zmdi zmdi-home zmdi-hc-3x"></i>
<span>Home</span>
</a>
<ul class="vertical menu nested">
<li><i class="zmdi zmdi-list zmdi-hc-3x"></i> Sub Item 1</li>
<li><i class="zmdi zmdi-list zmdi-hc-3x"></i> Sub Item 2</li>
<!-- ... -->
</ul>
</li>
<li class="top-level-item">
<a href="#">
<i class="zmdi zmdi-account zmdi-hc-3x"></i>
<span>Account</span>
</a>
</li>
<li class="top-level-item">
<a href="#">
<i class="zmdi zmdi-settings zmdi-hc-3x"></i>
<span>Settings</span>
</a>
</li>
<li class="top-level-item">
<a href="#">
<i class="zmdi zmdi-help-outline zmdi-hc-3x"></i>
<span>Help</span>
</a>
</li>
<!-- ... -->
</ul>
How to fix it so that the red bar only spans the height of the menu item?

Answer 1

I made a change in CSS, added a comment there.There was issue in CSS selector based on DOM structure
.left-bar.vertical.menu li instead of .left-bar .vertical.menu > li , I removed the space and > , so that all li are now having position relative
$(document).foundation();
.vertical.dropdown.menu [href] > i {
display: block;
}
.vertical.dropdown.menu [href] {
display: block;
text-align: center;
}
.left-bar {
position: fixed;
top: 0;
left: 0;
width: 150px;
height: 100%;
color: #333;
background: #FFFFFF;
}
.left-bar .vertical.menu.nested {
padding: 0;
}
.left-bar [href] > i {
display: block;
}
.left-bar [href] {
display: block;
text-align: left;
padding: 0;
color: #333;
}
.left-bar [href]:hover {
background: #9B9B9BFF;
}
/* I made a change here */
.left-bar.vertical.menu li {
position: relative;
background: #FFFFFF;
color: #333;
border: 0;
}
.left-bar .top-level-item [href]:hover::before {
content: "";
position: absolute;
left: 0;
top: 0;
bottom: 0;
width: 5px;
background-color: red;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/material-design-iconic-font/2.2.0/css/material-design-iconic-font.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/foundation/6.5.0/css/foundation.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/foundation/6.5.1/js/foundation.min.js"></script>
<ul class="vertical dropdown menu left-bar" data-dropdown-menu>
<li class="top-level-item">
<a href="#">
<i class="zmdi zmdi-home zmdi-hc-3x"></i>
<span>Home</span>
</a>
<ul class="vertical menu nested">
<li><i class="zmdi zmdi-list zmdi-hc-3x"></i> Sub Item 1</li>
<li><i class="zmdi zmdi-list zmdi-hc-3x"></i> Sub Item 2</li>
<!-- ... -->
</ul>
</li>
<li class="top-level-item">
<a href="#">
<i class="zmdi zmdi-account zmdi-hc-3x"></i>
<span>Account</span>
</a>
</li>
<li class="top-level-item">
<a href="#">
<i class="zmdi zmdi-settings zmdi-hc-3x"></i>
<span>Settings</span>
</a>
</li>
<li class="top-level-item">
<a href="#">
<i class="zmdi zmdi-help-outline zmdi-hc-3x"></i>
<span>Help</span>
</a>
</li>
<!-- ... -->
</ul>

Answer 2

I made a border left for the red; set to white initially.
I made changes:
Cut out all the CSS not needed including all the position related
stuff
Used classes instead of some [href] I consider "fragile"
Changed to specific background-color to be clear
Set a 0 border, then added the specifics for the left one
Used rem instead of px since typical browsers use a 16px= 1rem size base; and you can force if needed to support those that do not do so.
You can decide on the sub-item if you want the container to continue to have the border and do some things related to that with CSS as here: How to style the parent element when hovering a child element?
or perhaps with some simple JavaScript to help.
$(document).foundation();
.nav-item {
width: 10rem;
background-color: #FFFFFF;
text-align: center;
color: #333;
border: 0;
border-left-width: 0.25rem;
border-left-style: solid;
border-left-color: #FFFFFF;
}
.nav-item:hover {
border-left-color: #FF0000;
}
.nav-item .nav-link:hover {
background-color: #9B9B9BFF;
}
.nav-link {
color: #333333;
}
.nav-link * {
display: block;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/material-design-iconic-font/2.2.0/css/material-design-iconic-font.min.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/foundation/6.5.0/css/foundation.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/foundation/6.5.1/js/foundation.min.js"></script>
<ul class="vertical dropdown menu left-bar" data-dropdown-menu>
<li class="top-level-item nav-item">
<a class="nav-link" href="#">
<i class="zmdi zmdi-home zmdi-hc-3x"></i>
<span>Home</span>
</a>
<ul class="vertical menu nested">
<li class="nav-item"><a class="nav-link" href="#"><i class="zmdi zmdi-list zmdi-hc-3x"></i> Sub Item 1</a></li>
<li class="nav-item"><a class="nav-link" href="#"><i class="zmdi zmdi-list zmdi-hc-3x"></i> Sub Item 2</a></li>
</ul>
</li>
<li class="top-level-item nav-item">
<a class="nav-link" href="#">
<i class="zmdi zmdi-account zmdi-hc-3x"></i>
<span>Account</span>
</a>
</li>
<li class="top-level-item nav-item">
<a class="nav-link" href="#">
<i class="zmdi zmdi-settings zmdi-hc-3x"></i>
<span>Settings</span>
</a>
</li>
<li class="top-level-item nav-item">
<a class="nav-link" href="#">
<i class="zmdi zmdi-help-outline zmdi-hc-3x"></i>
<span>Help</span>
</a>
</li>
</ul>

Answer 3

you have position absolute on top-level-item href before
put position relative on top-level-item instead of the li
.top-level-item {
position: relative;
}