在一个网站的底部,我有一个“下拉菜单”。
看看下面的小提琴:
body {
background-color: #ccc;
}
ul {
list-style-type:none;
width:200px;
}
.spacer {
height:150px;
width:auto;
}
ul,li {
margin:0;
padding:0;
}
a {
color:#fff;
width:200px;
background-color:#e4003d;
}
ul li a {
text-decoration: none;
display: block;
padding: 10px;
}
ul li ul {
z-index: 8888;
position: absolute;
background-color: #fff;
display: none;
}
ul:hover li ul, ul:focus li ul {
display:block;
}
ul li ul li {
background-color: #fff;
color: #e4003d;
background-image: none;
}
ul li ul li a {
background-color: #fff;
color: #e4003d;
background-image: none;
}
ul li ul li a:hover, ul li ul li a:focus {
background-color: #e4003d;
color: #fff !important;
}
ul li ul {
margin-top: -100px;
}
<div class="spacer"></div>
<ul class="page-switcher">
<li>
<a href="#">Sitamet</a>
<ul>
<li><a href="http://#">Lorem</a></li>
<li><a href="http://#">Ipsum</a></li>
<li><a href="http://#">Dolor</a></li>
</ul>
</li>
</ul>
<div class="spacer"></div>
悬停菜单后,我希望子菜单恰好在
ul.page-switcher
的顶部结束。没有有关菜单内项目数或项目高度的信息。在示例中,我使用了
margin-top:-100px;
,但这只是为了演示,因为像素数不是固定的。需要仅CSS的解决方案,并且应保持绝对位置。您将如何解决?
最佳答案
设置ul.page-switcher
position: relative
并给出隐藏的ul
位置bottom: 100%
与此无关,页面切换器的高度或弹出项目的数量/高度都无关紧要。
为什么这样做是基于以下事实:绝对定位的ul
的bottom: 100%
将相对于其第一祖先,而该祖先的位置不同于static
,在这种情况下为page-switcher
。
更新/添加了CSS规则
ul.page-switcher {
position: relative;
}
ul li ul {
bottom: 100%;
}
堆栈片段
body {
background-color: #ccc;
}
ul {
list-style-type:none;
width:200px;
}
.spacer {
height:150px;
width:auto;
}
ul,li {
margin:0;
padding:0;
}
a {
color:#fff;
width:200px;
background-color:#e4003d;
}
ul li a {
text-decoration: none;
display: block;
padding: 10px;
}
ul li ul {
z-index: 8888;
position: absolute;
background-color: #fff;
display: none;
}
ul:hover li ul, ul:focus li ul {
display:block;
}
ul li ul li {
background-color: #fff;
color: #e4003d;
background-image: none;
}
ul li ul li a {
background-color: #fff;
color: #e4003d;
background-image: none;
}
ul li ul li a:hover, ul li ul li a:focus {
background-color: #e4003d;
color: #fff !important;
}
ul.page-switcher {
position: relative;
}
ul li ul {
bottom: 100%;
}
<div class="spacer"></div>
<ul class="page-switcher">
<li>
<a href="#">Sitamet</a>
<ul>
<li><a href="http://#">Lorem</a></li>
<li><a href="http://#">Ipsum</a></li>
<li><a href="http://#">Dolor</a></li>
</ul>
</li>
</ul>
<div class="spacer"></div>