1

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

有问题的网站在这里 > http://www.grimeforum.com/ 当您将鼠标悬停在“新闻”LI 上时，子 UL 似乎被压扁了。

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

当我删除

position: relative;

从

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

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

有任何想法吗？

这是小提琴 - http://jsfiddle.net/sCW9A/ 从第 463 行删除 postition:relative

4

3 回答 3

1

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

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

white-space: nowrap;
于 2013-10-11T21:23:51.077 回答
0

该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;
}
于 2013-10-11T21:29:18.333 回答
0

嗯，学到了新东西。

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

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

于 2013-10-11T21:58:46.623 回答