Question

我正在尝试将图像设置为菜单项，但没有原始项目的文本。 问题是我无法在悬停时访问子菜单。根本没有悬停操作。我正在使用WordPress。

li.menu-item.menu-item-type-custom.menu-item-object-custom.menu-item-56 {
background: url(http://lexhabitat.org/wp-content/themes/lexingtonhabitatforhumanity/img/ReStore-menu-ico.png)no-repeat center;
text-indent: 100%;
white-space: nowrap;
overflow: hidden;
width: 55px;
margin: 0px 15px !important;
}

Example Site - See Primary Horizontal Menu

Screen Shot Example

Answer 1

只需从您的CSS中删除overflow:hidden;即可。来自W3 site：

overflow属性指定当内容溢出元素框时会发生什么。

由于您将overflow:hidden放在容器上，子菜单将隐藏在溢出中，因此不可见。删除它会显示您的菜单子项。

编辑：您还在此自定义菜单上缩进菜单文本，将其从视图中删除，这不是一个好的解决方案。删除文本缩进，因为它上面有一个特殊的类，你可以轻松地定位它

li.menu-item.menu-item-type-custom.menu-item-object-custom.menu-item-56 > a {
    color:transparent!important;

}

li.menu-item.menu-item-type-custom.menu-item-object-custom.menu-item-56 > a:hover {
    color:transparent!important;
}

如果这是针对客户的，那么它就足够了＃39;解决方案，因为您的目标是从wordpress（..menu-item-56）创建的特定类。一般来说，如果我是为主题做这个，我可能会考虑更改菜单步进以合并图像菜单。

使用图像作为没有文本的菜单项

1 个答案: