CSS製作絕對小孩寬度獨立於相對父寬度

http://newsletter.blueday.it/stackov_3.png

我設置主菜單是UL /李李浮動：左;顯示：塊;裏面有一個元素的屬性display：block;和一些填充。每一個立場都是相對的。每一個裏面都有一個.main_menu_submenu div，位置：絕對。在裏面，它有另一個ul/li，每個li都有另外的屬性顯示：block;向左飄浮。問題是.main_menu_submenu的寬度取決於容器li的寬度（主菜單的寬度），並且子菜單元素不能全部保留在同一行上。

這是結果：

http://newsletter.blueday.it/stackov_1.png

我試圖即使顯示：內聯塊而不是浮在LIS，或將顯示：內聯塊到.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>

（I使用兩個div（#main_menu_shadower_bottom和#main_menu_shadower_top）的頂部和底部陰影，因爲陰影是圓形的和底部之一具有在子菜單的頂部）。

來源

2013-07-10 tobia.zanarella

只要刪除#main_menu李

http://jsfiddle.net/STfGL/4/

來源

2013-07-10 11:02:32 Anton

謝謝！奇蹟般有效！只是想知道：爲什麼絕對定位的子菜單停留在不再相對定位的main_menu裏面？ –

試試這個

添加一個類作爲這樣

的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>

Demo

來源

2013-07-10 10:38:13

我看到你的提琴比較礦井沒有區別的position:relative;。 –

CSS製作絕對小孩寬度獨立於相對父寬度

回答

相關問題