Hover before spans entire height of page for menu items

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><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?

ashish singh · Answer 1 · 2023-01-09T15:21:45.923

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><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>

This is good but please check the second level under Home. The sub-menu items are exhibiting a similar behavior in your fix. — The Doctor, Jan 09 '23 at 14:55

score 0 · Answer 2 · answered Jan 09 '23 at 13:16

0

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

answered Jan 09 '23 at 13:16

pier farrugia

1,520
2
2
9

Mark Schultheiss · Accepted Answer · 2023-01-10T13:29:43.430

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>

This will be better but text is supposed to be under the icons. — The Doctor, Jan 09 '23 at 22:59
That is just a matter of making the `nav-link` items flow using a block with `.nav-link * { display: block; }` I updated that to reflect that change — Mark Schultheiss, Jan 10 '23 at 13:30

Hover before spans entire height of page for menu items

3 Answers3