代码之家 › 专栏 › 技术社区 › Jason Goemaat

下拉菜单CSS padding on<li>扩展到容器

menu css html

Jason Goemaat · 技术社区 · 15 年前

我有一个仅限CSS的下拉菜单,它的工作方式与我希望的一样,只是我必须用一个<div>包围每个元素的文本;。问题是,我应用于<li>元素的填充会导致元素超出列表的正常边界( 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 size属性可用于告诉浏览器100%包括填充和边框。默认的内容框意味着100%只引用内容,填充和边框会使其更大( plunker ):

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

2 回复 | 直到 12 年前

jonesbp 15 年前

这两条线的组合:

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

引起你的问题。在ul.childmenu的li's in div.menu中,所有li's in div.menu的填充将添加到100%宽度之外。将ul.childmenu容器的CSS规则更改为:

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

将通过加倍子li上的填充(包括左填充和右填充)在右侧填充容器,并为您提供一个显示与子li相同宽度的容器。

aendra 15 年前

您可能需要对CSS层次结构更加具体;请尝试:

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

推荐文章

code-geek · Jquery根据单选按钮选择隐藏或显示文本字段

1 年前

Jamie · 在CSS链接的文件名中添加Jinja占位符

1 年前

ptownbro · 重叠分区标签,同时保持以下所有分区和内容就位

1 年前

Luke Frost IEng MIMechE · Bootstrap 5.3在Div中的项目位置没有如我所期望的那样显示

1 年前

Reegan · 使用Angular ngFor指令在html中渲染嵌套对象值

1 年前

wqyutv · 当找不到文件时,任何破坏错误的东西都不会出现,我该怎么解决这个问题?

1 年前

user29519291 · 为不同的变量创建一个带有可重用Click函数的简单菜单

1 年前

Gukkey · 在React中明确隐藏日期类型输入后,如果我单击父div,如何显示日期选择器?

1 年前

Lorenzo Bertolaccini · 在Angular项目中通过对话框后,在控制台中显示但在HTML中不显示的数据数组

1 年前

john Rizzo · 按钮背景颜色、悬停和活动状态存在问题

1 年前