Question

链接：http://danhumphrey.co.uk/nav/

正如您可以看到，如果将鼠标悬停在最后一项上，则最后一项无法正常工作，您将只获得一半的选项。

我尝试过使用li，h2和a的填充和边距并且未成功。

非常感谢任何帮助。

Answer 1

问题在于固定宽度使得一些css改变如下：

nav {
 height: auto;
 padding: 0;
 margin: 23px auto 0;
 display: block;
 position: relative;
 text-align: center;
 line-height: 23px;
 height: 29px;

}
ul#headNav {
 padding: 0px 0 0 0;
 display: inline-block;
 background: #7F7C74;
background: -moz-linear-gradient(top, #7F7C74 0%, #94918A 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#7F7C74), color-stop(100%,#94918A));
background: -webkit-linear-gradient(top, #7F7C74 0%,#94918A 100%);
background: -o-linear-gradient(top, #7F7C74 0%,#94918A 100%);
background: -ms-linear-gradient(top, #7F7C74 0%,#94918A 100%);
background: linear-gradient(top, #7F7C74 0%,#94918A 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#7f7c74', endColorstr='#94918a',GradientType=0 );
}

注意：我刚从width:960px;＆amp;移除了<nav>已将text-align:center添加到其中移动所有渐变CSS＆amp; display:inline-block;至#headNav

工作小提琴：http://jsfiddle.net/surendraVsingh/pZkk9/1/

Answer 2

您已将内联Width定义为最后一个li元素 - width: 40px;

宽度不是必需的，您可以删除它，或者如果您因某种原因需要它，然后将其增加到width: 95px;并且它将起作用。在最新的Firefox中测试

Answer 3

您的问题是您更改了灰色条前面的链接背景，但没有更宽。您有几种选择：

修复菜单项的宽度并确保它们加起来的宽度正确（可能包括边框）或
设置a元素的所有背景（这样大小自然会相同）

Answer 4

删除内联style="width: 40px;"并将此行添加到您的css：

nav ul li:last-child{width: 91px;}

CSS导航 - 最后一项未正确对齐

4 个答案: