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?
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
I made changes to the CSS and added comments there. Problems with CSS selectors based on DOM structure
.left-bar.vertical.menu liInstead of.left-bar .vertical.menu > li, I removed the spaces and>so that alllinow have relative positions.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; }I left a border for the red; initially set to white.
I made changes:
[href]I think "fragile"background-colorfor clarityreminstead ofpxbecause typical browsers use16px=1remsize 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.
.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; }