I need to implement this menu with its submenu:
I set ul / li for the main menu with li float: left; display: block; float: left; display: block; , and inside them there is an element with the properties display: block; and some indentation.
Each li has position: relative . Inside each li there is a div .main_menu_submenu with position: absolute . Inside, he has another ul / li , where each li again has display: block; float: left properties display: block; float: left display: block; float: left . The problem is that the width of .main_menu_submenu changes depending on the width of the li container (main menu), and the submenu items cannot remain all on the same line.
This is the result:
(source: blueday.it )
I even tried with display: inline-block instead of floating li s, or putting display: inline-block in .main_menu_submenu block. It is not possible to force the .main_menu_submenu div to remain on the same line, the width of which does not depend on the width of the parent li.
If I assign position: relative instead of absolute for .main_menu_submenu , as a result, the width of the parent is adapted to the width of the child:
(source: blueday.it )
I thought that the only solution would be to create a submenu in the form of a table from 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?
Violin: http://jsfiddle.net/STfGL
.clearfix:after { clear: both; display: block; content: " "; height: 0px; visibility: hidden; } .clearfix { display: inline-block; } * 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; }
<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 #main_menu_shadower_bottom ( #main_menu_shadower_bottom and #main_menu_shadower_top) for the top and bottom shadow, because the shadow is rounded and the bottom should be on top of the submenu).
source share