<分区>
编辑问题以包含 desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem .这将有助于其他人回答问题。
关闭 7 年前。
html - 如何在父级左侧创建下拉菜单？
我试过了，但是太难了，所以我需要你的帮助...
我想创建一个下拉菜单，其左边缘必须与主菜单的右边缘齐平。另外，子菜单应该在同一行。问题是我不知道怎么...
我唯一能做的，绝对定位子菜单，但我认为这太难了，而且我在调整窗口大小时遇到问题......
这是一个例子:
a {
color: #ffdf00;
}
body {
color: #fff;
background: #a0a0a0;
}
.block {
background-color: #646464;
border: 1px solid #505050;
border-radius: 0 10px 10px 0;
font-size: 1.045em;
margin-left: 5px;
padding: 15px 20px;
}
h2 {
font-size: 1.071em;
line-height: 1.2;
margin: 0 0 10px;
padding-bottom: 8px;
padding-left: 15px;
font-weight: inherit;
}
#block-system-main-menu {
padding-bottom: 0;
padding-left: 0;
padding-right: 0;
width: 30%;
}
.block .content {
font-size: 0.94em;
line-height: 1.4;
}
.content {
margin-top: 10px;
}
.clearfix::after {
clear: both;
content: ".";
display: block;
height: 0;
visibility: hidden;
}
.block ul {
margin: 0;
padding: 0 0 0.25em 0;
}
ul.menu {
border: 0 none;
list-style: outside none none;
text-align: left;
}
ul li.leaf {
letter-spacing: 0.02em;
align-items: center;
background: #646464;
border-top: 1px solid #a0a0a0;
display: flex;
font-size: 15px;
list-style-type: none;
padding-bottom: 8px;
padding-top: 8px;
padding-left: 15px;
}
.sotto {
letter-spacing: 0.02em;
align-items: center;
background: #404040;
border-top: 1px solid #fff;
display: flex;
font-size: 15px;
list-style-type: none;
margin-left: 100px;
padding-bottom: 8px;
padding-top: 8px;
padding-left: 15px;
padding-right: 15px;
}
li:hover.leaf {
background: #404040;
}
.stato {
display: none;
}
.stato:hover {
display: block;
}<div class="block block-system block-menu" id="block-system-main-menu">
<h2>Menu</h2>
<div class="content">
<ul class="menu clearfix">
<li class="first leaf"><a title="" href="#">Home</a>
</li>
<li class="leaf"><a href="#">Mappe </a>
<ul class="stato">
<li class="sotto"><a href="#">Aaaa</a></li>
<li class="sotto"><a href="#">Aaaakkk</a></li>
</ul>
</li>
<li class="leaf"><a title="" href="#">vulcani</a>
</li>
<li class="last leaf"><a href="#">Ciao</a>
</li>
</ul>
</div>
</div>👉 JSFiddle
我希望你能帮助我...
谢谢!
最佳答案
将子 ul.stato 子菜单绝对定位在相对定位的父 li.leaf 中是执行此操作的最佳方法。
查看此 updated version of your jsfiddle .
这里要注意的关键 CSS 如下。您还可以用百分比声明 right:，例如 -100% 以获得更流畅的设计。
ul li.leaf {
position: relative;
}
ul li.leaf ul.stato {
position: absolute;
right: -88px;
top: 0;
display:none;
}
一旦屏幕尺寸低于菜单和子菜单的宽度，用媒体查询点击它以另一种方式格式化它。
关于html - 如何在父级左侧创建下拉菜单？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/32810008/