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

因此，我将一个CSS下拉菜单添加到网站，但是我无法正确显示它。如何在父母LI下对齐下拉菜单UL？

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

我已经花了几个小时搞乱位置，但它显示在正确的位置，但很压扁，或者它漂浮在左边（但没有压扁）。

当我从

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

删除

position: relative;

它appers unsquashed，而是向左浮动父李之外。

任何想法？

这里是小提琴 - http://jsfiddle.net/sCW9A/ 删除postition：相对从线463

来源

2013-10-11 JMD

对于我们来帮助诊断您的问题，请发布重现您的问题*所需的最小（[SSCCE]（http://sscce.org/））代码（HTML和CSS）*，以及演示站点在那里我们可以看到，编辑和修改有问题的代码，如[JS Fiddle]（http://jsfiddle.net/），[JS Bin]（http://jsbin.com/）等。 –

我检查了FF，这对我来说很好。菜单做了一些奇怪的悬停效果，但它下降。你可以发布你的浏览器吗？ – Cam

例如，“即将发布的版本”分为两行而不是一行。此外，悬停效果意味着是儿童LI的完整背景，而不是3/4。 – JMD

给它一个宽度175px为我工作。

好吧，我得到了问题。首先改变#menu-nav li到#menu-nav>li，因为你不希望所有李鸿章为float，在菜单导航离开其次这是你的子菜单

white-space: nowrap;

来源

2013-10-11 21:23:51

我不能给它一个静态宽度，因为其他菜单的其他项目的尺寸会更大。我需要有流体宽度。 – JMD

如果有效，请检查更新后的答案。 –

谢谢，第一位工作，但在你发布这个之前计算出白色空间的技巧时刻！无论如何，我都会将你的答案标记为答案。 – JMD

的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-11 21:29:18

嗯，学到了新的东西。

增加了white-space: nowrap;到#menu-nav ul li a{和hey presto，在使用多个字页标题时不需要 ，也没有更多的布局问题。

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

来源

2013-10-11 21:58:46 JMD

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

回答

相关问题