我正在开发左侧导航。我希望悬停时红色条出现在菜单项之前。它适用于“主页”项目及其子项目，但其他根项目会导致悬停时红色条从上到下跨越页面的整个宽度。
$(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>
如何修复它，使红条仅跨越菜单项的高度？
我对 CSS 进行了更改，并在那里添加了注释。基于 DOM 结构的 CSS 选择器存在问题
.left-bar.vertical.menu li而不是.left-bar .vertical.menu > li，我删除了空格和>，以便所有li现在都具有相对位置.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; }我为红色留了一个边框；最初设置为白色。
我做了更改：
[href]我认为“脆弱”background-color以清晰rem而不是px，因为典型的浏览器使用16px=1rem大小基础；如果需要，您可以强制支持那些不这样做的人。如果您希望容器继续具有边框并使用 CSS 执行一些与此相关的操作，则可以决定子项目，如下所示： 悬停子元素时如何设置父元素的样式？ 或者也许使用一些简单的 JavaScript 来提供帮助。
.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; }