gpt4 book ai didi

html - CSS悬停下拉菜单,绝对位置?

转载 作者:行者123 更新时间:2023-11-28 03:51:00 28 4
gpt4 key购买 nike

描述这个问题的最好方法是用图片(不要介意荷兰语),我现在坚持这个: Example1

在第一个示例中,您可以看到红色下拉菜单悬停在本例中与父项对齐。我想要的是这样的: Example2

我在示例 2 中的做法是使用元素检查并使用 margin-top (40px) 手动更改 Ul。这意味着我必须在接下来的几个菜单链接上使用 80px、120px 等。

有没有更简单的方法?

提前致谢!

最佳答案

相对于菜单容器 ( <ul> ) 而不是菜单项 ( <li> ) 定位下拉菜单。

jsFiddle 上的一个简单示例.

相关的 HTML:

<ul class="outer">
<li>
Beelden

<ul class="sub-menu">
<li>Geurkaarsen</li>
<li>Rituele kaarsen</li>
<li>Affirmatie kaarsen</li>
</ul>
</li>
</ul>

和 CSS:

/* Your outer menu */
ul.outer {
position: relative;
}

li {
/* Whatever styles you set here, don't give it relative positioning */
}

ul.sub-menu {
position: absolute;
top: 0;
right: -100%;
width: 100%;
}

现场演示:

* {
box-sizing: border-box;
margin: 0;
padding: 0;
}

body {
height: 100vh;
}

body > ul {
/* This next line is crucial */
position: relative;
background-color: #c5e2d8;
width: 30%;
height: 100%;
}

ul.sub-menu {
display: none;
position: absolute;
top: 0;
right: -100%;
width: 100%;
background-color: tomato;
}

li {
display: block;
color: #444;
padding: .5em;
cursor: pointer;
}

li.has-children::after {
content: '▸';
position: absolute;
right: 5px;
}

li:hover {
background-color: tomato;
}

li.has-children:hover ul {
display: block;
}
<ul>
<li class="has-children">
Beelden

<ul class="sub-menu">
<li>Geurkaarsen</li>
<li>Rituele kaarsen</li>
<li>Affirmatie kaarsen</li>
</ul>
</li>
<li class="has-children">
Kaarsen

<ul class="sub-menu">
<li>Sub-menu 2</li>
<li>I don't know</li>
<li>any Dutch</li>
</ul>
</li>
<li>Wierook</li>
<li>Kruiden</li>
<li>Olien</li>
</ul>

关于html - CSS悬停下拉菜单,绝对位置?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/43718643/

28 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com