CSS使绝对子宽度与相对父宽度无关
我需要通过它的子菜单来实现这个菜单：
http://newsletter.blueday.it/stackov_3.png
我将主菜单设置为带有li float的ul / li：left; 显示：块; 里面有一个元素的属性display：block; 和一些填充。 每一个立场都是相对的。 每一个里面都有一个.main_menu_submenu div，其位置是：绝对。 在里面，它有另一个ul / li，每个li都有另外的属性显示：block; 向左飘浮。 问题是.main_menu_submenu的宽度取决于容器li的宽度（主菜单的宽度），并且子菜单元素不能保留在同一行上。
这是结果：
http://newsletter.blueday.it/stackov_1.png
我甚至尝试使用display：inline-block而不是将lis浮动，或将display：inline-block放入.main_menu_submenu块。 没有办法让.main_menu_submenu div停留在一行上，其宽度不依赖于父li的宽度。
如果我将位置：相对而不是绝对值分配给.main_menu_submenu，则结果是父宽度适合子宽度：
http://newsletter.blueday.it/stackov_2.png
我认为唯一的解决方案是将子菜单构建为一行和n个单元格而不是列表，但我真的不喜欢这个解决方案。
有没有其他方法可以实现结果？
小提琴：http://jsfiddle.net/STfGL/
码。
CSS：
.clearfix:after { clear: both; display: block; content: " "; height: 0px; visibility: hidden; }
.clearfix { display: inline-block; }
/* Hide these rules from IE-mac */
* html .clearfix { height: 1%; }
.clearfix { display: block; }
li.clearfix { display: list-item; }
#top_header_menu { width: 100%; background: transparent none; height: 70px; }
#main_menu_cage { width: 100%; background: none #E9E9E9; }
#main_menu_cage, #main_menu li { height: 50px; }
#main_menu_shadower_top { background: transparent url('/images/shadow_bg_up.png') center top no-repeat; height: 10px; width: 100%; }
#main_menu_shadower_bottom { background: transparent url('/images/shadow_bg_down.png') center bottom no-repeat; height: 10px; width: 100%; position: relative; z-index: 11; }
#main_menu { font-size: 14px; }
#main_menu li { display: block; float: left; position: relative; color: #255B9A; }
#main_menu li:hover { background: none #6092BB; color: #FFFFFF; text-decoration: none; }
#main_menu li a { font-weight: bold; text-decoration: none; color: inherit; display: block; height: 100%; padding: 10px 6px 0; box-sizing: border-box; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; }
#main_menu li a:hover { color: inherit; text-decoration: inherit; }
#main_menu li a span { font-size: 12px; font-weight: normal; display: block; }
#main_menu .main_menu_submenu ul { padding-left: 0; }
#main_menu .main_menu_submenu { position: absolute; z-index: 10; padding: 10px 5px 5px; background: none #A2C9E9; border-radius: 0 0 3px 3px; -moz-border-radius: 0 0 3px 3px; -webkit-border-radius: 0 0 3px 3px; white-space: nowrap; }
#main_menu .main_menu_submenu li { display: block; float: left; padding: 0 5px; border-left: 1px solid #255B9A; height: 20px; font-size: 14px; }
#main_menu .main_menu_submenu li:hover { background: none transparent; color: inherit; text-decoration: inherit; }
#main_menu .main_menu_submenu li:first-child { border-left: none; }
#main_menu .main_menu_submenu li a { display: block; padding: 2px 4px; color: #255B9A; text-decoration: none; font-weight: normal; }
#main_menu .main_menu_submenu li a:hover { color: #FFFFFF; background: #6092BB none; text-decoration: none; }
HTML：
<div id="top_header_menu">
<div id="main_menu_shadower_top"></div>
<div id="main_menu_cage">
<div id="main_menu" class="contents_cager">
<ul class="clearfix">
<li>
<a href="/page/lazienda.html">
L'Azienda
<span>Scopri Blue Day srl</span>
</a>
<div class="main_menu_submenu">
<ul class="clearfix">
<li>
<a href="/">La storia</a>
</li>
<li>
<a href="/">Le persone</a>
</li>
</ul>
</div>
</li>
</ul>
</div>
</div>
<div id="main_menu_shadower_bottom"></div>
</div>
（我使用了两个div（#main_menu_shadower_bottom和#main_menu_shadower_top）作为顶部和底部阴影，因为阴影是圆形的，最下面的阴影必须位于子菜单的顶部）。
只需删除该position:relative; #main_menu li
http://jsfiddle.net/STfGL/4/
尝试这个
像这样添加一个类
CSS
.submenu{display:inline-block;}
您的导航代码
<div class="main_menu_submenu">
<ul class="submenu"> //---------------- Remove clearfix class and add submenu class this ul
<li>
<a href="/">La storia</a>
</li>
<li>
<a href="/">Le persone</a>
</li>
</ul>
</div>
演示
链接地址: http://www.djcxy.com/p/81361.html上一篇: CSS Make the absolute child width independent from the relative parent width