Menu item hover effect covers entire page height

Question

I am developing left navigation. I want the red bar to appear before the menu item on hover. It works for the "Home" item and its sub-items, but other root items cause a red bar on hover to span the entire width of the page from top to bottom.

$(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><a href="#"><i class="zmdi zmdi-list zmdi-hc-3x"></i> Sub Item 1</a></li>
      <li><a href="#"><i class="zmdi zmdi-list zmdi-hc-3x"></i> Sub Item 2</a></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 changes to the CSS and added comments there. Problems with CSS selectors based on DOM structure

.left-bar.vertical.menu li Instead of .left-bar .vertical.menu > li , I removed the spaces and > so that all li now have relative positions

$(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;
}

sssccc
sssccc

  

    
      
      Home
    
    

      
 Sub Item 1
      
 Sub Item 2
      
    
  
  

    
      
      Account
    
  
  

    
      
      Settings
    
  
  

    
      
      Help
    
  
  

Answer 2

I left a border for the red; initially set to white.

I made changes:

• Cut off all unnecessary CSS, including all position-related CSS thing
• Use classes instead of some [href] I think "fragile"
• Change to specific background-color for clarity
• Set 0 border, then add details for the left border
• Use rem instead of px because typical browsers use 16px = 1rem size basis; you can Force support for those who don't.

If you want the container to continue to have a border and use CSS to do something related to that, you can decide on the child like this: How to style the parent element when the child is hovered? Or maybe use 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;
}

sssccc
sssccc

  

    
      
      Home
    
    

      
 Sub Item 1
      
 Sub Item 2
    
  
  

    
      
      Account
    
  
  

    
      
      Settings
    
  
  

    
      
      Help