在一个网站的底部,我有一个“下拉菜单”。

看看下面的小提琴:



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%

与此无关,页面切换器的高度或弹出项目的数量/高度都无关紧要。

为什么这样做是基于以下事实:绝对定位的ulbottom: 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>

09-11 19:06
查看更多