0

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

如您所见，如果将鼠标悬停在最后一项上，则最后一项无法正常工作，您只会得到一半的盒子。

我尝试过使用 的填充和边距，但没有li成功。h2a

任何帮助将非常感激。

4

4 回答 4

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;并<nav>添加text-align:center到它并将所有渐变 CSS & 移动display:inline-block;到#headNav

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

于 2012-07-09T09:14:46.263 回答
0

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

nav ul li:last-child{width: 91px;}
于 2012-07-09T09:12:55.530 回答
0

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

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

于 2012-07-09T09:07:41.553 回答
0

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

  • 修复菜单项的宽度并确保它们相加到正确的宽度（可能包括边框）或

  • 在元素上设置所有背景a（这样大小自然会相同）

于 2012-07-09T09:08:37.747 回答