Question

我在一个600px的黑色容器内有一个下拉菜单，我希望红色儿童节目的宽度为容器的100％，而不是现在发生的100％的页面宽度。我需要这个是％，因为网站是响应。

<div id="navcontainer">
    <ul>

        <li style="display: inline;float: left;">
            <a href="#">Filters</a>

            <ul style="text-align:left">
                <li><a href="">Brand</a></li>

                <li><a href="">Model</a></li>

                <li><a href="">Color</a></li>

                <li><a href="">Features</a></li>
            </ul>
        </li>
        <li style="display: inline;float: right;">
            <a href="#">Sort by</a>

            <ul style="text-align:right">
                <li><a href="">Newest</a></li>

                <li><a href="">Oldest</a></li>

                <li><a href="">Cheapest</a></li>
            </ul>
        </li>
    </ul>
</div>

Answer 1

为{ - 1}}

添加position:relative;

#navcontainer ul

#navcontainer {
    background:#222;
    margin: 0 auto;
    width: 600px;
}
#navcontainer ul {
    text-align:center;
    margin:0;
    padding:0;
    list-style:none;
    width:100%;
    position:relative;
}
#navcontainer ul li {
    display:inline;
    /*position:relative;*/
}
#navcontainer ul li a {
    display:inline-block;
    color:#fff;
    font-size:20px;
    padding:20px 30px;
}
#navcontainer ul li a:hover {
    background:#999;
}
#navcontainer ul ul {
    position:absolute;
    left:0;
    top:100%;
    z-index:10;
    width:100%;
    display:none;
    background:red;
}
#navcontainer ul ul li {
    float:none;
}
#navcontainer ul ul li a {
    text-align:left;
}
#navcontainer ul li:hover ul {
    display:block;
}

Answer 2

你可以使用位置属性进行许多不同的用途，但你需要有一个包含的子菜单，你不能使用position：absolute;对于父元素你可以将它用于子元素，在这里你可以为两个主题。改变这一行来解决你的问题。

#navcontainer ul ul {
    position:relative;
}

抱歉，我的语言不好。

Answer 3

以上描述并查看您解决问题的演示您应该为父元素添加以下特征：

#navcontainer {
    background: rgb(34, 34, 34) none repeat scroll 0 0;
    border: 1px solid;
    height: 65px;
    margin: 0 auto;
    position: relative;
    text-align: center;
    width: 600px;
}

让下拉儿童100％的容器

3 个答案: