Question

希望有人可以为我提供帮助，因为我目前正在拔头发。我在WordPress中有一个垂直菜单，正在尝试将样式设置为活动并悬停。我的效果正常，但是位置错误。

这是菜单：

<nav class="vertical-header-menu-container"><ul id="main-menu" class="d-none d-md-block navbar-nav vertical-header-menu"><li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-home nav-item menu-item-1106 "><a title="Home" href="https://and-it.co.uk/dan/" class="nav-link"><div class="title-content">Home</div></a></li>
<li class="menu-item menu-item-type-post_type menu-item-object-page current-menu-item page_item page-item-636 current_page_item nav-item menu-item-1073 active "><a title="Blog" href="https://and-it.co.uk/dan/blog/" class="nav-link"><div class="title-content">Blog</div></a></li>
</ul></nav>

这是所应用的CSS：

#main-menu .current-menu-item a::before,
#main-menu .current_page_item a::before {
content: "";
position: absolute;
left: 0;
right: 0;
}
#main-menu li a::before {
content: "";
position: absolute;
left: 0;
right: 100%;
background: #15bf86;
height: 3px;
-webkit-transition-property: right;
transition-property: right;
-webkit-transition-duration: 0.3s;
transition-duration: 0.3s;
-webkit-transition-timing-function: ease-out;
transition-timing-function: ease-out;
}
#main-menu li a:hover {
opacity: 1 !important;
}
#main-menu li a:hover:before {
right: 0;
}
#main-menu li li a:before {
bottom: 10%;
}

想法是在活动菜单项下方或悬停的菜单项下方显示一条实线。目前位于项目上方。

我以为我可能使用了错误的选择器，但是尝试更改它们却没有喜悦。我还认为也许我应该使用“之后”而不是“之前”，但是再一次，没有喜悦。

希望您能提供任何帮助或指导。

Answer 1

据我了解，这就是您所期望的

#main-menu li a::after {
content: "";
position: absolute;
left: 0;
right: 100%;
background: #15bf86;
height: 3px;
-webkit-transition-property: right;
transition-property: right;
-webkit-transition-duration: 0.3s;
transition-duration: 0.3s;
-webkit-transition-timing-function: ease-out;
transition-timing-function: ease-out;
}
#main-menu li a:hover {
opacity: 1 !important;
}
#main-menu li a:hover:after {
right: 0;
}
#main-menu li li a:after {
bottom: 10%;
}

<nav class="vertical-header-menu-container"><ul id="main-menu" class="d-none d-md-block navbar-nav vertical-header-menu"><li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-home nav-item menu-item-1106 "><a title="Home" href="https://and-it.co.uk/dan/" class="nav-link"><div class="title-content">Home</div></a></li>
<li class="menu-item menu-item-type-post_type menu-item-object-page current-menu-item page_item page-item-636 current_page_item nav-item menu-item-1073 active "><a title="Blog" href="https://and-it.co.uk/dan/blog/" class="nav-link"><div class="title-content">Blog</div></a></li>
</ul></nav>

WordPress垂直菜单悬停效果定位

1 个答案: