如何使绝对子宽度独立于相对父宽度? [英] How to make the absolute child width independent from the relative parent width?

问题描述

我需要通过其子菜单来实现此菜单:

I need to realize this menu with its submenu:

我将主菜单设置为带有li float: left; display: block;的ul/li，并且在它们内部有一个具有属性display: block;和一些填充的元素.

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.

每个li都有position: relative.在每个li中都有一个.main_menu_submenu div，其中position: absolute.在内部，它还有另一个ul/li，其中每个li都再次具有属性display: block; float: left. 问题是.main_menu_submenu的宽度会根据容器li(主菜单的)的宽度进行调整，并且子菜单元素不能全部保持在同一行.

Every li has 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.

这是结果:

_{(来源: blueday.it )}

我什至尝试使用display: inline-block而不是浮动li或将display:inline-block放入.main_menu_submenu块.没有办法使.main_menu_submenu div停留在一条线上，而其宽度不取决于父级li的宽度.

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.

如果将position: relative而不是absolute分配给.main_menu_submenu，则结果是父级宽度适应子级宽度:

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

_{(来源: blueday.it )}

_{(source: blueday.it)}

我认为唯一的解决方案是将子菜单构建为具有一行和n个单元格的表格而不是一个列表，但是我真的不喜欢这种解决方案.

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?

提琴: 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;
}

<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)，因为阴影是圆形的，底部阴影必须位于子菜单的顶部.)

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

推荐答案

只需删除#main_menu li的position:relative;

Just delete the position:relative; of #main_menu li

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

这篇关于如何使绝对子宽度独立于相对父宽度?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！