Html 下拉菜单CSS填充在<;李>;延伸超过容器
我有一个只使用CSS的下拉菜单,它的工作方式与我所希望的一样,只是我必须用一个。问题是,我对Html 下拉菜单CSS填充在<;李>;延伸超过容器,html,css,menu,Html,Css,Menu,我有一个只使用CSS的下拉菜单,它的工作方式与我所希望的一样,只是我必须用一个。问题是,我对元素应用的填充会导致元素超出列表的正常边界()。有没有办法不使用div就完成这项工作 <html> <head> <title>CSS Menu Test</title> <style> div.menu { width: 1200px; background-color: #f8f8f8 } div.menu a { text-deco
<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>
您可能需要更具体地使用CSS层次结构;尝试:
div.menu ul li { padding: 12px; }
-æ。这两条线组合在一起:
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上增加两倍的填充来在右侧填充容器(同时考虑左填充和右填充),并为您提供一个与子li的宽度相同的容器。在Linux上的Firefox 4中运行良好。工作起来很有魅力,但我仍然不明白为什么封闭的ul不会自动扩展,这是故意的吗?
div.menu ul.childmenu { border: solid 1px black; padding-right: 24px; }