如何在父 LI 下对齐下拉菜单 UL

Question

所以我正在向站点添加一个CSS下拉菜单，但是我无法使其正确显示。

有问题的网站在这里> http://www.grimeforum.com/当您将鼠标悬停在"新闻"LI 上时，子 UL 显示为压扁。

在过去的几个小时里，我一直在弄乱位置，但它要么显示在正确的位置但非常压扁，要么向左浮动(但没有被压扁(。

当我删除时

position: relative;

从

#menu-nav li {
float: left;
position: relative;
}

它未被压扁，但漂浮在父LI之外的左侧。

有什么想法吗？

这是小提琴 - http://jsfiddle.net/sCW9A/从第 463 行删除位置：相对

Answer 1

给它一个 175px 的宽度对我有用。

好的，我遇到了问题。首先#menu-nav li更改为#menu-nav>li，因为您不希望所有 li 都向左浮动在菜单导航下其次，将其添加到子菜单下的锚点

white-space: nowrap; 

Answer 2

a元素必须是带有 display: block 和 padding 的元素。

#menu-nav ul li {
  padding: 0;
}
#menu-nav ul li a {
  width: 100%;
  padding: 0 15px;
  display: block;
  box-sizing: border-box;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  min-width: 180px;
}

Answer 3

嗯，学到了一些新东西。

添加了white-space: nowrap; #menu-nav ul li a{和嘿presto，使用多个单词页面标题时无需 ，也没有更多的布局问题。

不是真正的修复，而是一种解决方法，直到我学会更好地编码，我想...！