CSS水平菜单链接问题

Question

我有一个有问题的简单（水平）CSS 菜单列表。列表中的链接仅在某个点之前处于活动状态，例如我列表中的菜单项 4 不起作用，1、2 和 3 都可以。通过不工作，我的意思是“悬停”和超链接操作都消失了。

这与 'float' 和 'overflow' 属性有关，如果我不浮动 #nav 元素并删除 'overflow:hidden'，我可以让所有链接正常工作，但格式被搞砸了，或多或少，取决于浏览器。

代码如下，任何帮助都会很棒。哦，评论的左右 50% 属性在那里，因为如果我将菜单居中，则所有链接都不起作用:-(

<div id="nav">
<ul>
<li><a href="#" class="active">One</a></li>
<li><a href="#">Two</a></li>
<li><a href="#">Three</a></li>
<li><a href="#">Four</a></li>
</ul>
</div>


#nav
{
float: left;
height:30px;
width: 940px;
margin:0;
position: relative;
overflow: hidden;
white-space: nowrap;
font-family: Helvetica Neue, Helvetica, Verdana, sans-serif;
font-size: 20px;
font-weight: 200;
background-color: #333333;
list-style-type: none; 
}

#nav ul
{
margin:0;
padding-left: 0;
/*left: 50%;*/
}

#nav ul li
{
display: inline;
list-style: none;
padding: 2px 6px 2px 6px;
/*right:50%;*/
}

#nav ul li a 
{
float: left;
display: block;
display: inline;
text-decoration: none;
color: #ffffff;
padding:3px;
text-align: left;
}

#nav li a:hover { color: #6698FF;}
#nav li a.active { color: #6698FF;}

Answer 1

#nav ul li a 的风格看起来很奇怪：使用 float:left 和 display:inline 是自找麻烦。由于您已经在浮动父元素 (li) ，我认为您不需要浮动 a 元素。我不确定您希望实现哪种菜单，但通常情况下，您会浮动 ul li，然后 display:block 里面的 A。

所以，尝试改变这个：

#nav ul li a 
{
float: left;
display: block;
display: inline;
text-decoration: none;
color: #ffffff;
padding:3px;
text-align: left;
}

到这里

#nav ul li a 
{
display: block;

text-decoration: none;
color: #ffffff;
padding:3px;
text-align: left;
}

Answer 2

尝试在下面对您的 css 进行以下调整。

#nav ul li a 
{
float: left;
display: inline-block;
text-decoration: none;
color: #ffffff;
padding:3px;
text-align: left;
}

#nav ul li a:hover, #nav ul li a.active 
{ 
  color: #6698FF;
}

Answer 3

我不确定我是否完全理解您想要的外观。但是，通过“简单（水平）CSS 菜单列表”，我假设您正在寻找在背景上排列的所有链接？

试试这个：

  #nav {
    height:30px;
    width: 940px;
    margin:0;
    white-space: nowrap;
    font-family: Helvetica Neue, Helvetica, Verdana, sans-serif;
    font-size: 20px;
    font-weight: 200;
    background-color: #333333;
  }

  #nav ul {
    margin:0;
    padding-left: 0;
    list-style: none; 
  }

  #nav ul li {
    float: left;
    display: inline;
    padding: 2px 6px 2px 6px;
  }

  #nav ul li a {
    display: block;
    text-decoration: none;
    color: #ffffff;
    padding:3px;
  }

  #nav li a:hover { color: #6698FF;}
  #nav li a.active { color: #6698FF;}

您需要做的就是将lis 浮动到您想要的任何方向。为了获得更大的灵活性，请从#nav 中删除height，然后将overflow: hidden; 放回原处。这样高度将由内容决定：更牢固的解决方案。

如果您希望列表居中，请对其进行以下更改：

  #nav ul {
    margin:0;
    padding-left: 0;
    list-style: none; 
    text-align: center;
  }

  #nav ul li {
    display: inline;
    padding: 2px 6px 2px 6px;
  }

  #nav ul li a {
    display: -moz-inline-box;
    -moz-box-orient: vertical;
    display: inline-block;
    vertical-align: middle;
    #display: inline;
    #vertical-align: auto;
    text-decoration: none;
    color: #ffffff;
    padding:3px;
  }

（#nav ul li a 下的所有垃圾只是一种可靠的内联块声明的跨浏览器方法）