css - 百分比宽度巨型菜单加上一个 html 列表上的标准下拉菜单

Question

通过 Google 搜索的长期读者，第一次发布。

我正在尝试在一个 html 列表上实现一个百分比宽度的大型菜单和一个标准像素宽度的下拉菜单。

(我希望大型菜单宽度基于百分比以在响应式布局中工作，我对此感到满意。)

我似乎无法让他们一起工作。这是一个 fiddle : http://jsfiddle.net/eaVjT/

如果我像 fiddle 中的示例 1 那样在顶级 li 链接上设置 position static，则大型菜单工作正常，但标准下拉菜单会中断(它不是垂直的)。

#menu li { float: left; list-style: none; margin: 0; padding: 0; position: static; }

如果我像 fiddle 中的示例 2 那样在顶层 li 链接上设置相对位置，则标准下拉菜单工作正常(如预期的那样垂直)，但大型菜单中断(它被压扁到顶部的宽度级父链接)。

#menu li { float: left; list-style: none; margin: 0; padding: 0; position: relative; }

我尝试通过使用不同的类来更改顶级链接的静态和相对，但这似乎不可行，因为大型菜单的高度已添加到页面底部。

我完全被难住了。

有什么想法吗？

我还没有找到解决方案，希望有人能提供帮助。

非常感谢。

#menu 的完整 css 如下:

/*wrapper*/
#menu { width: auto; height: auto; margin: 0; text-align: left; position: relative; display: block; z-index: 6; clear: both; }

/*top level*/
#menu ul { margin: 0; padding: 0; }
#menu li { float: left; list-style: none; margin: 0; padding: 0; position: static; background: #ccc; }
#menu li a { display: block; position: relative; padding: 0 10px 0 10px; }
#menu li, #menu li a { height: 50px; }
#menu li a span { line-height: 50px; }

/*std drop down*/
#menu li ul { margin: 0; left: -999em; opacity: 0; visibility: hidden; overflow: hidden; position: absolute; z-index: 20; }
#menu li:hover ul { left: 0; opacity: 1; visibility: visible; overflow: visible; }
#menu li li { float: left; width: 200px; position: relative; display: block; background: #999; }
#menu li li, #menu li li a { height: auto; }
#menu li li a { display: block; padding: 8px 10px; }

/*mega drop down*/
#menu li .drop { width: 100%; left: -999em; opacity: 0; visibility: hidden; overflow: hidden; position: absolute; z-index: 20; background: #333; }
#menu li:hover .drop { left: 0; opacity: 1; visibility: visible; overflow: visible; }
#menu li .drop ul { margin: 0; padding: 0; position: relative; }
#menu li .drop li { float: none; width: auto; margin: 0; padding: 0; position: relative; background: #666; }
#menu li .drop p a, #menu li .drop li a { position: relative; display: block; }
/*columns*/
#menu .drop .col { width: 23%; height: auto; margin: 15px 1.5% 0 0; float: left; display: block; position: relative; }
#menu .drop .col.first { margin-left: 1.5%; }
#menu .drop .col.last { width: 23.5%; margin-right: 0; }
/*links*/
#menu .drop p { padding: 0; }
#menu .drop p a { padding: 5px 0 8px 0; }
#menu .drop li a, #menu .drop li.last a { padding: 5px 0; }

/*text*/
#menu li a span, #menu li li a, #menu .drop p a, #menu .drop li a { color: #fff; font-size: 1.5em; text-decoration: none; }

Answer 1

我能想到的最简单的解决方案是将大型下拉菜单的 position 更改为 fixed。这样做时，它不再相对于父级的限制宽度绝对定位。

Updated Example

#menu li .drop {
    width: 100%;
    left: -999em;
    opacity: 0;
    visibility: hidden;
    overflow: hidden;
    position: fixed;   /* Changed.. */
    z-index: 20;
    background: #333;
}

如果上述解决方案有问题，另一种方法是删除 left 定位，然后从嵌套的 li 元素中删除 float 。这样做时，您不必相对定位父 ul 元素。

Updated Example

删除以下内容:

#menu li .drop { left: -999em; }

#menu li:hover ul { left: 0; }

添加以下内容:

#menu > ul > li > ul > li { float: none; }