CSS 下拉菜单，子项超出父项宽度答案

【问题标题】：CSS Dropdown Menu, Child Exceed Parent WidthCSS 下拉菜单，子项超出父项宽度
【发布时间】：2014-02-20 04:44:23
【问题描述】：

我正在尝试使用 HTML5 和 CSS3 构建一个居中对齐下拉菜单。如果必须的话，我可以使用 jQuery 来提供帮助。这必须在 IE8+ 中工作。目前，我的菜单居中对齐，并且下拉菜单有效，但下拉项目 (div) 的宽度与上面的 li 宽度相同。

<div class="menu">
    <ul class="level0">
        <li class="level0">
            <a href=" http://domain.com/">
                <span>home</span>
            </a>
            <div class="sub">
                <div class="sub-column">
                    <a href="http://domain.com/customer-service">
                        <span>Customer Service</span>
                    </a>
                </div>
                <div class="sub-column">
                    <a href="http://domain.com/privacy-policy">
                        <span>Privacy Policy</span>
                    </a>
                </div>
            </div>
        </li>
        <li class="level0">
            <a href=" http://domain.com/about">
                <span>About Us</span>
            </a>
            <div class="sub">
                <div class="sub-column">
                    <div>
                        <p>Blah blah blah, some random text goes here.</p>
                    </div>
                </div>
            </div>
        </li>
    </ul>
</div>

还有 CSS（试图压缩它以便于查看）。

.menu {
    clear:both; display:block; max-width:100%; margin:0 auto; padding:0; 
    border:1px solid #ddd; border-bottom:7px solid #323131; text-align:center;
}
.menu ul {
    display:block; max-width:100%; height:3.2em; margin:0 auto;
    padding:0; list-style-type:none; text-align:center;
}
.menu ul li {display:inline-block; margin:0; padding:0; height:3.2em; 
    line-height:3.2em; position:relative;
}
.menu ul li > div {display:none; visibility:hidden; position:absolute; 
    background:#f60; z-index:999; transition:display 0.25s ease;
}
.menu ul li:hover > div {display:inline-block; visibility:visible; 
    max-width:100%;
}
.menu ul li a {display:block; margin:0; padding:0 2em; font-size:90%; 
    font-weight:700; text-transform:uppercase; transition:background-color 0.25s ease;
}
.menu ul li a:hover {background-color:#e4e4e4; color:#323131;}

.menu ul li.switcher {display:none;}

如何让第一行 div (.menu ul li > div) 的宽度采用祖父元素 (.menu) 的宽度？或者至少拉伸以适应使用max-width的内容？

感谢任何帮助。谢谢。

~编辑~

这是小提琴：http://jsfiddle.net/Xp6yG/

【问题讨论】：

制作.menu position: relative。这里，看这个问题：(stackoverflow.com/questions/17568374/…)

标签： css drop-down-menu

【解决方案1】：

我认为我正确理解了您的问题，请尝试以下操作：

fiddle demo

CSS：

.sub {left:0px;}

【讨论】：

【解决方案2】：

除了使用 James 建议制作 .menu position: relative 之外，我认为您还需要删除 .menu ul li 上的 position: relative

【讨论】：

【解决方案3】：

感谢一些有用的建议，这与我所得到的一样接近工作：http://jsfiddle.net/Xp6yG/3/。

我将.menu ul li:hover > div 上的显示更改为display:table;，并将whitespace:nowrap; 和right:50%; 添加到.menu ul li > div 元素中。

下拉列表出现在我想要的位置并拉伸以适合包含的元素。非常感谢大家！

【讨论】：