我正在尝试创建一个简单的下拉菜单，但无论我做什么，单击时我的“下拉菜单”总是直接出现在按钮的侧面(而不是底部):(
我已将相关代码添加到 fiddle 中，但似乎根本无法让下拉菜单显示在那里。我正在尝试让下拉菜单立即显示在“block5”元素下方(并与“dropDown”按钮对齐)。任何帮助将不胜感激。 https://jsfiddle.net/k6azhptd/4/
<body>
<div id="header">
<div id="block2"><a href="stuff/">Browse</a></div>
<div id="block3"><a href="stuff/">Post</a></div>
<div id="block4"><a href="stuff/">Search</a></div>
<div id="block5">
<span>Logged in as </span><div class='dropDown' onClick='myFunction();'>userName▾</div>
<div id="userDrop" class="dropContent">
<span>User Page</span>
</div>
</div>
</div>
#header {
min-width: 1290px;
background-color: #CC0000;
color: #FFFFFF;
height: 80px;
font-family: sans-serif;
font-size: 1.1em;
}
#header a {
color: #FFF;
text-decoration: none;
}
#block1 {
margin-left: 50px;
display: inline-block;
height: 100%;
}
#block2 {
display: inline-block;
vertical-align: top;
width: 180px;
height: 100%;
text-align: center;
border-left: 1px solid #C00;
border-right: 1px solid #C00;
}
#block2:hover {
border-left: 1px solid #FFF;
border-right: 1px solid #FFF;
background-color: #900;
}
#block2 a {
position: relative;
top: 40px;
}
#block3 {
display: inline-block;
vertical-align: top;
width: 200px;
height: 100%;
text-align: center;
border-left: 1px solid #C00;
border-right: 1px solid #C00;
}
#block3:hover {
border-left: 1px solid #FFF;
border-right: 1px solid #FFF;
background-color: #900;
}
#block3 a {
position: relative;
top: 40px;
}
#block4 {
display: inline-block;
vertical-align: top;
width: 120px;
height: 100%;
text-align: center;
border-left: 1px solid #C00;
border-right: 1px solid #C00;
}
#block4:hover {
border-left: 1px solid #FFF;
border-right: 1px solid #FFF;
background-color: #900;
}
#block4 a {
position: relative;
top: 40px;
}
#block5 {
display: inline-block;
position:relative;
margin-left: 50px;
vertical-align: top;
width: 250px;
height: 100%;
text-align: right;
background-color: #444;
}
#block5 span {
position: relative;
top: 40px;
}
.dropDown {
position: relative;
top: 40px;
display: inline-block;
color: #ff9900;
font-weight: bold;
text-decoration: none;
}
.dropContent {
display: none;
position: absolute;
width: 200px;
background-color: #CCC;
color: #000;
z-index: 10;
}
.show {display:block;}
最佳答案
检查这个片段
function myFunction() {
document.getElementById("userDrop").classList.toggle("show");
};#header {
min-width: 1290px;
background-color: #CC0000;
color: #FFFFFF;
height: 80px;
font-family: sans-serif;
font-size: 1.1em;
display: flex;
}
#header a {
color: #FFF;
text-decoration: none;
}
#header div {
height: 100%;
text-align: center;
flex: 1;
}
#block1 {
margin-left: 50px;
height: 100%;
}
#block2 {
vertical-align: top;
width: 180px;
height: 100%;
text-align: center;
border-left: 1px solid #C00;
border-right: 1px solid #C00;
}
#block2:hover {
border-left: 1px solid #FFF;
border-right: 1px solid #FFF;
background-color: #900;
}
#block2 a {
position: relative;
top: 40px;
}
#block3 {
vertical-align: top;
width: 200px;
height: 100%;
text-align: center;
border-left: 1px solid #C00;
border-right: 1px solid #C00;
}
#block3:hover {
border-left: 1px solid #FFF;
border-right: 1px solid #FFF;
background-color: #900;
}
#block3 a {
position: relative;
top: 40px;
}
#block4 {
vertical-align: top;
width: 120px;
height: 100%;
text-align: center;
border-left: 1px solid #C00;
border-right: 1px solid #C00;
}
#block4:hover {
border-left: 1px solid #FFF;
border-right: 1px solid #FFF;
background-color: #900;
}
#block4 a {
position: relative;
top: 40px;
}
#block5 {
background-color: #444;
position: relative;
margin-left: 50px;
vertical-align: top;
width: 250px;
height: 100%;
text-align: right;
}
#block5 span {
position: relative;
top: 40px;
}
.dropContent {
display: none;
position: absolute;
top: 85px;
width: 200px;
background-color: #CCC;
color: #000;
}
.dropDown {
position: relative;
top: 40px;
display: inline-block;
color: #ff9900;
font-weight: bold;
text-decoration: none;
}
.dropContent {
display: none;
position: absolute;
width: 100%;
background-color: #CCC;
color: #000;
z-index: 10;
}
.show {
display: block;
}<body>
<div id="header">
<div id="block2"><a href="stuff/">Browse</a>
</div>
<div id="block3"><a href="stuff/">Post</a>
</div>
<div id="block4"><a href="stuff/">Search</a>
</div>
<div id="block5">
<span>Logged in as </span>
<div class='dropDown' onClick='myFunction();'>userName▾</div>
<div id="userDrop" class="dropContent">
<span>User Page</span>
</div>
</div>
</div>PS:全屏查看 希望这有帮助
关于CSS 下拉菜单总是在旁边(不是底部)，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/41213443/