WordPress 网站中的 CSS 菜单悬停答案

【问题标题】：CSS Menu Hover in a Wordpress siteWordPress 网站中的 CSS 菜单悬停
【发布时间】：2013-05-16 05:35:20
【问题描述】：

我有一个site，我正在尝试修复悬停菜单，您可以看到它没有正确悬停，并且悬停是每个菜单的边框。以及悬停时的最后一个菜单“CONTACT”不适合整个空间，或者我们可以说悬停时它不会在整个空间中翻转。

问题图片：

如何解决？

【问题讨论】：

你能给我们看看代码吗？看起来它有一个固定的悬停宽度
没问题，伙计，给你：aaron.wordpresstiger.com/wp-content/themes/custom_theme/…
您应该编辑您的问题以添加您的代码。
由于声誉点较少，它不允许我添加超过 2 个链接。但我在上一条评论中添加了代码链接。
这样做的原因是因为您将“悬停状态图像”应用于锚标记，因为该锚标记嵌套在您的 LI 内，它出现在 LI 的顶部，覆盖了您的边界.您遇到的另一个问题是，您的锚标签 ALL 在所有角落都有边框半径，而只有第一个和最后一个应该。至于解决这个问题，您有几个选择，一种方法是减小锚标记的大小，以便让边框显示出来。我建议改为重新开始并在 CSS 中编写整个代码并删除图像。

标签： html wordpress css

【解决方案1】：

你好，这是你的 css 新部分

#access {
clear: both;
display: block;
float: left;
margin: 0 auto 6px;
width: 90%;
margin-left: 40px;
height: 55px;
border-radius: 8px;
}

#access ul {
font-size: 21px;
list-style: none;
margin: 0 0 0 -0.5em;
padding-left: 0;
border-radius: 8px;
text-shadow: 1px 1px #000;
padding: 0;
height: 55px;
display: block;
width: 100%;
margin: 0;
background-image: url('background-image.png');
}
#access li {
float: left;
position: relative;
border-style: solid;
width: 25% !important;
background-image: url('border-left-image.png');
background-position: right;
background-repeat: no-repeat;
display: block;
}

在第 601 行的 http://aaron.wordpresstiger.com/wp-content/themes/custom_theme/style.css 中，这是您的问题：宽度：24%（从您的 css 中删除此行）

#access li:last-of-type, li#menu-item-31{
    border-right: none !important;
    width:24% !important;
    background-image:none;
}

#access li:hover:last-of-type, li#menu-item-31{
    border-right: none !important;
    width:24% !important;
    background-image:none;
}

编辑：

添加到您的 CSS：

#menu-item-31 a {
    width: 100%;
}

【讨论】：

巴克，是的，这行得通。第二个问题解决了，但第一个问题仍然存在。悬停时它会代替菜单的右边框。我只是想让菜单悬停看起来像officialfacebooklikes.com - 我真的很感谢你的时间和回应。谢谢大佬！