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，并显示：阻止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;}

您需要做的只是将li的方向浮动到您想要的方向。为了获得更大的灵活性，请从height移除#nav并将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下的所有垃圾只是一种可靠的内联块声明的跨浏览器方法）

CSS水平菜单链接问题

3 个答案: