0

在http://jsfiddle.net/q8eDF/上，我正在尝试设置菜单样式，但它还不是很完美。

如何让 .dropdown-container 的红色边框也扩展为绿色区域（即整个菜单），.dropdown-header 的蓝色边框延伸到 .dropdown-item 的右边框（或 .dropdown -item 延伸到 .dropdown-header 的边界，以防标题比最宽的项目宽），同时在 .dropdown-header 的最后一个字符和 .dropdown-arrow 之间允许 ~10px 的空间？

我不关心BC，只要当前的FF和Chrome可以运行它就可以了。

HTML：

<div id="dd" class="dropdown-container">
  <div class="dropdown-header">Feed options<span class="dropdown-arrow">v</span></div>
  <div class="dropdown-items">
    <div class="dropdown-item">Reload</div>
    <div class="dropdown-item">Unsubscribe</div>
    <div class="dropdown-item">Reload from source</div>
  </div>
</div>

CSS：

.dropdown-container {
display: inline-block;
border: 1px solid red;
position: relative;
}
.dropdown-items {
display: block;
position: absolute;
z-index: 999;
background: #fff;
border: 1px solid green;
}
.dropdown-items {
margin: 5px 0px;
}
.dropdown-item {
margin: 3px 6px;
cursor: pointer;
}
.dropdown-header {
border: 1px solid blue;
width: 100%;
cursor: pointer;
}
.dropdown-arrow {
position: absolute;
right: 0;
}
4

1 回答 1

1

如果导航栏是您所追求的，我建议将整个东西包装在一个绝对定位的容器中，以便它可以漂浮在其他内容之上：

HTML

<div class="navbar">
    <div id="dd" class="dropdown-container">
        <div class="dropdown-header">
            Feed options<span class="dropdown-arrow">v</span>
        </div>
        <div class="dropdown-items">
            <div class="dropdown-item">Reload</div>
            <div class="dropdown-item">Unsubscribe</div>
            <div class="dropdown-item">Reload from source</div>
        </div>
    </div>
</div>

CSS

.navbar { 
    position: absolute; 
    top: 0px; 
}
.navbar > div { 
    display: inline-block; 
    vertical-align: top; 
}

body { 
    padding-top: 23px; 
}

.dropdown-container {
    display: inline-block;
}
.dropdown-header {
    width: 100%;
}
.dropdown-arrow {
    float: right;
}

小提琴

于 2013-09-26T12:18:27.217 回答