Question

我有一个仅限CSS的下拉菜单就像我想要的那样工作，除了我必须用＆lt; div＆gt;包围每个元素的文本。问题是填充我应用于＆lt; li＆gt; elements使元素超出列表的正常范围（pic）。有没有办法让这项工作不使用div？

<html>
<head>
    <title>CSS Menu Test</title>
<style>
div.menu { width: 1200px; background-color: #f8f8f8 }
div.menu a { text-decoration: none; color: Black; padding: 0; margin: 0 }
div.menu li { cursor: pointer; display:block; position: relative }
div.menu ul:first-child li { float: left; margin-right: 10px }
div.menu ul { list-style: none; margin: 0; padding: 0; float: left; background-color: #f4f4f4 ; display: block}
div.menu ul.childmenu { border: solid 1px black }
div.menu ul.childmenu li { width: 100% }
div.menu ul ul { display: none }
div.menu ul li:hover > div > ul { display: block; position: absolute; left: 0% }
div.menu ul li:hover > ul { display: block; position: absolute; left: 0% }
div.menu ul.childmenu li:hover > ul { display: block; position: absolute; left: 100%; top: 0% }
div.menu li:hover {  background-color: #88bbdd }

div.menu div { padding: 12px; }
/* would like to replace div.menu div with this:
div.menu li { padding: 12px; }
*/
</style>
</head>
<body>
<div class="menu">
    <ul>
        <li class="selected"><div>Services</div>
            <ul class="childmenu">
                <li>
                    <div>Ally</div>
                </li>
                <li>
                    <div>Business</div>
                    <ul class="childmenu">
                        <li><div>Accounting</div></li>
                        <li><div>Administrative</div></li>
                        <li>
                            <div>Legal</div>
                            <ul class="childmenu">
                                <li><div>Incorporation</div></li>
                                <li><div>Takeovers</div></li>
                                <li><div>Workers&nbsp;Comp</div></li>
                            </ul>

                        </li>
                        <li><div>Communication</div></li>
                    </ul>
                </li>
                <li><div>Personal</div></li>
            </ul>
        </li>
        <li><div>Company</div><ul class="childmenu">
            <li><div>Contact</div></li>
            <li><div>Employment</div></li>
        </ul>
        </li>
    </ul>
    <br style="clear: both" />
</div>
<h1>Content</h1>
</body>

修改的 css box-sizing属性可用于告诉浏览器100％包含填充和边框。内容框的默认值表示100％仅指内容，填充和边框将使其更大（plunker）：

div.menu li { box-sizing: border-box; }

Answer 1

这两行合并：

div.menu ul.childmenu li { width: 100% }
div.menu li { padding: 12px; }

导致您的问题。你在div.menu中所有li的填充是在ul.childmenu里面的li的100％宽度之外添加的。将ul.childmenu容器的CSS规则更改为：

div.menu ul.childmenu { border: solid 1px black; padding-right: 24px; }

将通过对子li上的填充加倍来填充右侧的容器（同时考虑左右填充），并为您提供一个与其子项显示宽度相同的容器。

Answer 2

您可能需要更具体地使用CSS层次结构;尝试：

div.menu ul li { padding: 12px; }

-AE。

<li>上的下拉菜单CSS填充扩展到容器</li>

2 个答案: