CSS水平菜单链接问题

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

这与'float'和'overflow'属性有关，如果我不浮动#nav元素并删除'overflow:hidden'，我可以让所有链接正常工作，但格式在很大程度上是错误的，这取决于浏览器

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

#导航
{
浮动：左；
高度：30px；
宽度：940px；
保证金：0；
位置：相对位置；
溢出：隐藏；
空白：nowrap；
字体系列：Helvetica Neue、Helvetica、Verdana、无衬线；
字体大小：20px；
字号：200；
背景色：#333333；
列表样式类型：无；
}
#导航ul
{
保证金：0；
左侧填充：0；
/*左：50%*/
}
#李国荣
{
显示：内联；
列表样式：无；
填充：2px6px 2px6px；
/*右：50%*/
}
#海军ulli a
{
浮动：左；
显示：块；
显示：内联；
文字装饰：无；
颜色：#ffffff；
填充：3倍；
文本对齐：左对齐；
}
#导航李a：悬停{颜色：#6698FF；}
#nav li a.active{color:#6698FF；}

导航ul li a的样式似乎很奇怪：将

浮动：左

与

显示：内联

一起使用会带来麻烦。因为您已经浮动父元素（

li

），我认为您不需要浮动

a

元素。我不确定您希望实现哪种菜单，但通常，您浮动ul li，并显示：block the a inside

因此，请尝试更改此选项：

#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;
}

---

尝试对下面的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;
}

---

我不确定我是否完全理解您想要的是什么样子。但是，通过“简单（水平）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

s浮动到您想要的任何方向。为获得更大的灵活性，请从

#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

下的垃圾只是可靠内联块声明的跨浏览器方法）

好的，谢谢，这在单独的列表中有效，只是当我尝试浮动“导航”时，因为我想将其放置在另一个div下，这时链接断开。对不起，我可能应该更详细地提到这一点！这应该不难（在“导航”中添加浮动应该不会影响任何事情），但我需要查看实际的上下文，才能知道什么是中断的。你能发布一个截图，或者一个实际中断的完整代码的示例吗？是的，我知道你在说什么，我同意，它不应该影响任何东西，但出于某种原因。我会仔细查看我的代码，如果我看到任何相关内容，我可能会发回。无论如何，谢谢谢谢你的帮助。

  #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;
  }