CSS下拉菜单绝对 - 需要澄清答案

【问题标题】：CSS drop down menu absolute - need clarificationCSS下拉菜单绝对 - 需要澄清
【发布时间】：2013-04-14 12:39:42
【问题描述】：

嗨

我有这个来自http://nettuts.s3.amazonaws.com/819_megamenu/demo/index.html#的胖菜单代码：

<ul id="main">
<li><a href="" class="drop">Home</a>
    <div class="dropdown_2columns"><!-- Begin 2 columns container -->

        <div class="col_2">
            <h2>Welcome !</h2>
        </div>

        <div class="col_2">
            <p>Hi and welcome here ! This is a showcase of the possibilities of this awesome Mega Drop Down Menu.</p>             
            <p>This item comes with a large range of prepared typographic stylings such as headings, lists, etc.</p>             
        </div>

        <div class="col_2">
            <h2>Cross Browser Support</h2>
        </div>

        <div class="col_1">
            <img src="img/browsers.png" width="125" height="48" alt="" />
        </div>

        <div class="col_1">
            <p>This mega menu has been tested in all major browsers.</p>
        </div>

    </div
</li>

样式的相关部分是：

.dropdown_1column, 
.dropdown_2columns, 
.dropdown_3columns, 
.dropdown_4columns,
.dropdown_5columns {
    margin:4px auto;
    float:left;
    position:absolute;
    left:-999em; /* Hides the drop down */
    text-align:left;
}

.dropdown_1column {width: 140px;}
.dropdown_2columns {width: 280px;}
.dropdown_3columns {width: 420px;}
.dropdown_4columns {width: 560px;}
.dropdown_5columns {width: 700px;}

#menu li:hover .dropdown_1column, 
#menu li:hover .dropdown_2columns, 
#menu li:hover .dropdown_3columns,
#menu li:hover .dropdown_4columns,
#menu li:hover .dropdown_5columns {
    left:-1px;
    top:auto;
}

#menu li {
    float:left;
    display:block;
    text-align:center;
    position:relative;
    padding: 4px 10px 4px 10px;
    margin-right:30px;
    margin-top:7px;
    border:none;
}

#menu li:hover {
}

#menu li a {
    display:block;
    outline:0;
}   

    #menu li:hover a {
    color:#161616;
    text-shadow: 1px 1px 1px #ffffff;
}
#menu li .drop {
    padding-right:21px;
    background:url("img/drop.png") no-repeat right 8px;
}

即使下拉菜单的位置被提及为绝对位置 - 也没有提及绝对位置（即坐标）。如果 position:absolute 被移除，随后的元素（例如“5 个元素”等）会浮动在下拉菜单周围（即从菜单栏中选择“主页”菜单后弹出的那个）。因此，absolute 正在将下拉菜单直接放置在菜单栏中的主页下方，并且下一个菜单“5 列”放置在菜单栏中的“主页”旁边，而不是下拉菜单旁边。那么这是如何工作的（即浏览器如何理解将其呈现为绝对值）而不提及上/下/左/右坐标的值？在 position: absolute 的其他示例中，例如 w3schools 中的那些，直接提到了位置，即顶部：10px，左侧：5px 等。但这里就像魔术一样发生（但根本没有帮助我的理解）。因此，请帮助我理解这一点，并非常感谢您的帮助。

谢谢

【问题讨论】：

标签： css

【解决方案1】：

如果子元素是position:absolute，父元素是position:relative，则子元素继承父元素的定位。这是一个例子：

http://jsfiddle.net/charlescarver/CdBHQ/

父级可能是您发布的示例的relative 的一个原因是您希望下拉菜单与导航栏一起移动。对位置进行硬编码需要您在每次更改位置时再次对其进行硬编码。

在您的示例中，每列都有一个宽度。然而当你的时候，它的起始位置是继承自relative父级，然后自然而然地向右流动。

【讨论】：