Question

所以我在网站上添加了一个CSS下拉菜单，但是我无法正常显示它。

有问题的网站在这里＆gt; http://www.grimeforum.com/ 当你将鼠标悬停在＆＃34; news＆＃34;李，孩子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{并且pre presto，使用多个单词页面标题时不需要 ，也不再需要布局问题。

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

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

3 个答案: