CSS сделать абсолютный ребенок шириной не зависит от относительного родителя ширина

Question

мне нужно реализовать это меню в подменю:

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

я поставил главное меню, чтобы быть улями/li лития поплавок: левый ; display: block; и внутри них есть элемент со свойствами display: block; и некоторые дополнения. Каждая позиция li: относительная. Внутри каждого li есть .main_menu_submenu div, с положением: absolute. Внутри он имеет другую ul/li, где каждый li снова отображает свойства: block; плыть налево. Проблема в том, что ширина .main_menu_submenu адаптируется в зависимости от ширины контейнера li (главного меню), и элементы подменю не могут оставаться на одной линии.

Это результат:

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

Я попробовал даже с дисплеем: встроенный блок вместо плавающей ЛИС, или положить дисплей: встроенный блок к блоку .main_menu_submenu. Невозможно сделать div .main_menu_submenu div одной строкой с шириной, не зависящей от ширины родительской ли.

Если я назначу позиция: относительная, а не абсолютная, чтобы .main_menu_submenu, результат в том, что родительская ширина адаптируется по ширине ребенка:

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

Я думал, что единственным решением было бы построить подменю как таблица из одной строки и n ячеек вместо списка, но я ДЕЙСТВИТЕЛЬНО НЕ НУЖНО это решение.

Есть ли другой способ достижения результата?

Fiddle: http://jsfiddle.net/STfGL/

код.

УС:

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

(я использовал два дивы (#main_menu_shadower_bottom и #main_menu_shadower_top) для верхней и нижней тени, потому что тень закруглен, а нижний из них имеет быть в верхней части подменю).

Answer 1

Просто удалите position:relative; из #main_menu литий

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

Answer 2

Попробуйте

добавить один класс, как, как этот

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