Spi*_*rix 1 html css drop-down-menu
当我将鼠标悬停在" 下拉> ",下拉菜单出现在左侧下方的顶栏.如何在" 下拉> " 下面对齐它？
请注意,我只尝试使用CSS和HTML.
我的代码:
* {
margin: 0;
padding: 0;
}
header {
position: fixed;
height: 35px;
width: 100%;
background: black;
}
.top-container {
margin-top: 7px;
}
/* Code for drop-down list */
.dropdown {
margin-left: 100px;
display: inline;
color: #FFF;
}
.dropdown_list {
list-style: none;
display: none;
position: absolute;
color: red;
}
.dropdown_list li {
background: yellow;
}
.dropdown:hover {
background: #333;
}
.dropdown:hover .dropdown_list,
.dropdown_list:hover {
display: block;
top: 100%;
}<body>
<header>
<div class="top-container">
<div class="dropdown">Dropdown ❱
<ul class="dropdown_list">
<li>item 1</li>
<li>item 2</li>
<li>item 3</li>
</ul>
</div>
</div>
</header>
</body>改变.dropdown 来自inline于inline-block:
.dropdown {
display: inline-block;
}
片段:
* {
margin: 0;
padding: 0;
}
header {
position: fixed;
height: 35px;
width: 100%;
background: black;
}
.top-container {
margin-top: 7px;
}
/* Code for drop-down list */
.dropdown {
margin-left: 100px;
display: inline-block;
color: #FFF;
}
.dropdown_list {
list-style: none;
display: none;
position: absolute;
color: red;
}
.dropdown_list li {
background: yellow;
}
.dropdown:hover {
background: #333;
}
.dropdown:hover .dropdown_list,
.dropdown_list:hover {
display: block;
top: 100%;
}<body>
<header>
<div class="top-container">
<div class="dropdown">Dropdown ❱
<ul class="dropdown_list">
<li>item 1</li>
<li>item 2</li>
<li>item 3</li>
</ul>
</div>
</div>
</header>
</body>| 归档时间： |
|
| 查看次数： |
1049 次 |
| 最近记录： |