Question

您好

我有来自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;
}

即使下拉菜单的位置被称为绝对位置 - 也没有提到绝对位置（即坐标）。如果当前位置：绝对被移除，则后续元素（例如“5个元素”等）浮动在下拉菜单周围（即从菜单栏中选择“主页”菜单后弹出的那个）。因此绝对是将下拉菜单直接放在菜单栏中的家中，下一个菜单“5列”放在菜单栏中的“主页”旁边而不是下拉菜单旁边。那么这是如何工作的（即浏览器如何理解它被渲染为绝对的）而不提及顶部/底部/左/右坐标的值？在其他位置的例子中：绝对，例如w3schools中的位置，直接提到位置，即顶部：10px，左：5px等。但这里发生的就像魔术一样（但根本没有帮助我的理解）。所以请帮助我理解这一点，并非常感谢这样的帮助。

谢谢

Answer 1

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

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

父母可能是您发布的示例的relative的一个原因是因为您希望下拉菜单随导航栏一起移动。对位置进行硬编码需要您对每次位置变化进行硬编码。

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

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

1 个答案: