CSS Make the absolute child width independent from the relative parent width

I need to realize this menu with its submenu:

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

I set the main menu to be a ul/li with li float: left; display: block; and inside them there is an a element with properties display: block; and some padding. Every li is position: relative. Inside every li there is a .main_menu_submenu div, with position: absolute. Inside, it has another ul/li where every li has again properties display: block; float: left. The problem is that the width of .main_menu_submenu adapts depending on the width of the container li (of the main menu) and the submenu elements can't stay all on the same line.

This is the result:

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

I tried even with display: inline-block instead of floating the lis, or putting display: inline-block to the .main_menu_submenu block. There is no way to make the .main_menu_submenu div stay on one single line with its width not depending from the parent li width.

If I assign position: relative instead of absolute to .main_menu_submenu, the result is that the parent width adapts on the child width:

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

I thought the only solution would be to build the submenu as a table of one row and n cells instead of a list, but I REALLY DON'T like this solution.

Is there any other way to achieve the result?

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

Code.

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 used two divs (#main_menu_shadower_bottom and #main_menu_shadower_top) for the top and bottom shadow because the shadow is rounded and the bottom one has to be on top of submenu).

---

Just delete the position:relative; of #main_menu li

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

---

Try this

add one class as like this

Css

.submenu{display:inline-block;}

your nav code

<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

链接地址: http://www.djcxy.com/p/81362.html

上一篇: 按钮和div元素的CSS宽度不同

下一篇: CSS使绝对子宽度与相对父宽度无关