Drop-down menu CSS padding on <li> extends past container
Question
I've got a CSS-only drop-down menu working just like I want it to, except I have to surround the text of each element with a <div>. The problem is that padding I apply to the <li> elements causes the element to extend outside the normal bounds of the list ( pic ). Is there any way to make this work without using divs?
<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 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>
edit The css box-sizing property can be used to tell the browser that 100% includes padding and borders. The default of content-box means the 100% refers to the content only and the padding and borders will make it larger ( plunker ):
div.menu li { box-sizing: border-box; }
2 answers
solution1
1 ACCPTED 2010-11-24 13:58:18
These two lines in combination:
div.menu ul.childmenu li { width: 100% }
div.menu li { padding: 12px; }
are causing your problem. Your padding for the all li's in div.menu is getting added outside of your 100% width on li's inside of ul.childmenu. Changing your CSS rule for the ul.childmenu container to:
div.menu ul.childmenu { border: solid 1px black; padding-right: 24px; }
will pad the container on the right side by double the padding on the child li (accounting for both left and right padding) and give you a container that displays at the same width as its child.
solution2
0 2010-11-24 12:39:49
You might need to be more specific with the CSS hierarchy; try:
div.menu ul li { padding: 12px; }
-æ.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.