Question

所以我想让我的下拉列表正常工作。下拉列表位于我标题中的列表项下，该列表项会根据用户的用户名而变化。这使得尺寸不同但我无法在宽度调整后得到下拉列表。

这是正常的，但如果......

正如您在示例2中看到的，下拉列表比列表项更宽。我怎样才能让它改变宽度呢？

CSS：

header {
height: 72px;
width: 100%;
z-index: 999;
position: relative;
background-color: #2C3E50;
}

header ul {
margin: 0;
padding: 0;
list-style-type: none;
width: 600px;
height: 72px;
margin-left: auto;
margin-right: auto;
}

.navItem {
float: left;
padding-left: 35px;
padding-right: 35px;
padding-top: 26px;
padding-bottom: 26px;
text-decoration: none;
color: #FFF;
}

.navItem:hover {
background-color: #34495e;
}

header ul li a.right {
float: right;
}

.dropdown {
list-style-type: none;
}

.drop {
position: absolute;
float: right;
background: #2C3E50;
margin-top: 72px;
right: 103px;
width: 150px;
height: 140px;
display: none;
z-index: -10;
border-bottom-left-radius: 4px;
border-bottom-right-radius: 4px;

}

.drop li {
list-style-type: none;
height: 25px;
padding-top: 10px;
padding-left: 20px;
width: 123px;
}

.drop li a {
color: #FFF;
text-decoration: none;
}

.drop li:hover {
background: #34495e;
}

Answer 1

header ul{width:100%;position:relative;}

Answer 2

<强> DEMO

我在css中做了一些改变。主要的是移动填充并从锚定浮动到列表。

注意：dropdown div太小了，我不得不添加overflow auto来查看隐藏的内容。

<强> CSS：

header {
    height: 72px;
    width: 100%;
    z-index: 999;
    position: relative;
    background-color: #2C3E50;
}

header ul {
    margin: 0;
    padding: 0;
    list-style-type: none;
    width: 600px;
    height: 72px;
    margin-left: auto;
    margin-right: auto;
}
ul > li{
    float: left;
    padding-left: 35px;
    padding-right: 35px;
    padding-top: 26px;
    padding-bottom: 26px;
    position:relative;
}
.navItem {  
    text-decoration: none;
    color: #FFF;
}

.navItem:hover {
    background-color: #34495e;
}

header ul li a.right {
    float: right;
}

.dropdown {
    list-style-type: none;
}

.drop {
    background: none repeat scroll 0 0 #2C3E50;
    border-bottom-left-radius: 4px;
    border-bottom-right-radius: 4px;
    display: none;
    float: right;
    height: 140px;
    margin-top: 46px;
    overflow: auto;
    position: absolute;
    right: 0;
    width: 100%;
    z-index: -10;
}

.drop li {
    list-style-type: none;
    height: 25px;
    padding-top: 10px;
    padding-left: 20px;
    width: 123px;
}

.drop li a {
    color: #FFF;
    text-decoration: none;
}

.drop li:hover {
    background: #34495e;
}

下拉，适应父母的宽度？

2 个答案: