下拉菜单自上而下 [英] Dropddown menu top-down
本文介绍了下拉菜单自上而下的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我想知道如何使此下拉菜单从上到下而不是从左到右打开其子菜单吗？
I wonder how I can get this dropdown menu open its childrens from top to bottom instead from left to right? Having the li's inside the ul's open up horizontally instead of vertically.
我希望使特定列表可见，而不要像其他所有列表一样隐藏。我尝试用一个名为 last的类来标记此ul，并使其在CSS中可见...我没有使用CSS的经验。
Also I want to make a specific list visible and not hidden like all others. I tried to label this ul with a own class named 'last' and making it visible with CSS... I have no experience using CSS.
非常感谢。
ul {
list-style: none;
padding: 0;
margin: 0;
}
ul.last {
visibility: visible;
list-style: none;
padding: 0;
margin: 0;
}
li {
color: black;
padding: 1rem;
}
.container>ul {
width: 250px;
position: relative;
height: 100vh;
}
ul li {
display: block;
position: relative;
background-color: #224490;
}
ul li:hover>ul {
display: block;
position: absolute;
width: 250px;
height: 100%;
left: 250px;
top: 0;
}
ul ul {
display: none;
}
ul li {
background-color: white;
}
<div class="container">
<ul class="lists">
<li class="parent">str1str2str34
<ul class="child">
<li class="parent">A
<ul class="child">
<li>a11</li>
<li>a12 </li>
</ul>
</li>
<li class="parent">B
<ul class="child">
<li class="parent">B1
<ul class="child">
<li>b11</li>
<li>b12 </li>
</ul>
</li>
<li class="parent">B2
<ul class="child">
<li>b21 </li>
<li>22 </li>
<li>23 </li>
</ul>
</li>
<li class="parent">B3
<ul class="child">
<li class="parent">B31
<ul class="child">
<li>b31</li>
<li>b32 </li>
</ul>
</li>
<li class="parent">B32
<ul class="child">
<li>b41</li>
<li>b42</li>
<li>b43 </li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
<li class="parent">C
<ul class="child">
<li>c11</li>
<li class="parent">c12
<ul class="child">
<li>b41</li>
<li>b42</li>
<li>b43 </li>
</ul>
</li>
<li>c13 </li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
推荐答案
我已将 ul li 中的显示从块更改为内联阻止。为了正确定位，我在<$ c中注释了 left：250px; 和 top：0; $ c> ul li：hover> ul
I have changed the display in ul li from block to inline-block. In order to position correctly, I have commented out the left: 250px; and top: 0; in ul li:hover>ul
ul li {
display: inline-block; /* Change form block to inline-block */
position: relative;
background-color: #224490;
}
ul li:hover>ul {
display: block;
position: absolute;
width: 250px;
height: 100%;
/* left: 250px;
top: 0; */
}
ul {
list-style: none;
padding: 0;
margin: 0;
}
ul.last {
visibility: visible;
list-style: none;
padding: 0;
margin: 0;
}
li {
color: black;
padding: 1rem;
padding-left: 0; /* Edit 1: childrens right beneath the parent */
}
.container>ul {
width: 250px;
position: relative;
height: 100vh;
}
ul li {
display: inline-block; /* Change form block to inline-block */
position: relative;
background-color: #224490;
}
ul li:hover>ul {
display: block;
position: absolute;
width: 250px;
height: 100%;
/* left: 250px;
top: 0; */
}
ul ul {
display: none;
position: absolute;
width: 250px;
height: 100%;
}
ul li {
background-color: white;
}
<div class="container">
<ul class="lists">
<li class="parent">str1str2str34
<ul class="child">
<li class="parent">A
<ul class="child">
<li>a11</li>
<li>a12 </li>
</ul>
</li>
<li class="parent">B
<ul class="child">
<li class="parent">B1
<ul class="child">
<li>b11</li>
<li>b12 </li>
</ul>
</li>
<li class="parent">B2
<ul class="child">
<li>b21 </li>
<li>22 </li>
<li>23 </li>
</ul>
</li>
<li class="parent">B3
<ul class="child">
<li class="parent">B31
<ul class="child">
<li>b31</li>
<li>b32 </li>
</ul>
</li>
<li class="parent">B32
<ul class="child">
<li>b41</li>
<li>b42</li>
<li>b43 </li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
<li class="parent">C
<ul class="child">
<li>c11</li>
<li class="parent">c12
<ul class="child">
<li>b41</li>
<li>b42</li>
<li>b43 </li>
</ul>
</li>
<li>c13 </li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
更新：至让所有孩子始终可见
Update: To have all children visible all the time
ul {
list-style: none;
padding: 0;
margin: 0;
}
ul.last {
visibility: visible;
list-style: none;
padding: 0;
margin: 0;
}
li {
color: black;
padding: 1rem;
padding-left: 0; /* Edit 1: childrens right beneath the parent */
}
.container>ul {
width: 250px;
position: relative;
height: 100vh;
}
ul li {
display: inline-block; /* Change form block to inline-block */
position: relative;
background-color: #224490;
}
/* Comment out hover function */
/*
ul li:hover>ul {
display: block;
position: relative;
width: 250px;
height: 100%;
/* left: 250px;
top: 0;
}
*/
/* Update to always show the children */
ul ul {
display: block;
position: relative;
width: 250px;
height: 100%;
}
ul li {
background-color: white;
}
/* Flexbox to configure A B C into coloumn */
ul.lists > li > ul {
display: flex;
}
<div class="container">
<ul class="lists">
<li class="parent">str1str2str34
<ul class="child">
<li class="parent">A
<ul class="child">
<li>a11</li>
<li>a12 </li>
</ul>
</li>
<li class="parent">B
<ul class="child">
<li class="parent">B1
<ul class="child">
<li>b11</li>
<li>b12 </li>
</ul>
</li>
<li class="parent">B2
<ul class="child">
<li>b21 </li>
<li>22 </li>
<li>23 </li>
</ul>
</li>
<li class="parent">B3
<ul class="child">
<li class="parent">B31
<ul class="child">
<li>b31</li>
<li>b32 </li>
</ul>
</li>
<li class="parent">B32
<ul class="child">
<li>b41</li>
<li>b42</li>
<li>b43 </li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
<li class="parent">C
<ul class="child">
<li>c11</li>
<li class="parent">c12
<ul class="child">
<li>b41</li>
<li>b42</li>
<li>b43 </li>
</ul>
</li>
<li>c13 </li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
讨论中，我实现了以下代码：从绝对左侧而不是从父级li的下方而是在FIRST父级li的下方打开所有子级。但是，限制是每个li具有固定的宽度。希望ABC列表悬停在D列表上。
Based on our discussion, I have implemented the code where open up the child all from the absolute left and not from below the parent li but instead under the FIRST parent li. But, the limitation is to have a fixed width for each li. It is expected that the ABC list will cover the D list when hovering over it.
ul {
list-style: none;
padding: 0;
margin: 0;
}
ul.last {
visibility: visible;
list-style: none;
padding: 0;
margin: 0;
}
li {
color: black;
padding: 1rem;
padding-left: 0; /* Edit 1: childrens right beneath the parent */
}
.container>ul {
width: 250px;
position: relative; /* height: 100vh; */
}
ul.lists>li {
position: relative;
}
ul li {
display: inline-block; /* Change form block to inline-block */
background-color: #224490;
}
ul li:hover>ul {
display: block;
position: absolute;
width: 250px;
height: 100%;
z-index: 1;
/* left: 250px;
top: 0; */
}
ul ul {
display: none;
/* position: absolute;
width: 250px;
height: 100%; */
}
ul li {
background-color: white;
}
ul>li {
position: absolute;
}
ul>li:nth-child(2) {
left: 50px;
}
ul>li:nth-child(3) {
left: 100px;
}
ul>li:nth-child(4) {
left: 150px;
}
ul>li:nth-child(5) {
left: 200px;
}
ul>li:nth-child(2)>ul {
left: -50px;
}
ul>li:nth-child(3)>ul {
left: -100px;
}
ul>li:nth-child(4)>ul {
left: -150px;
}
ul>li:nth-child(5)>ul {
left: -200px;
}
<div class="container">
<ul class="lists">
<li class="parent">str1str2str34
<ul class="child">
<li class="parent">A
<ul class="child">
<li>a11</li>
<li>a12 </li>
</ul>
</li>
<li class="parent">B
<ul class="child">
<li class="parent">B1
<ul class="child">
<li>b11</li>
<li>b12 </li>
</ul>
</li>
<li class="parent">B2
<ul class="child">
<li>b21 </li>
<li>22 </li>
<li>23 </li>
</ul>
</li>
<li class="parent">B3
<ul class="child">
<li class="parent">B31
<ul class="child">
<li>b31</li>
<li>b32 </li>
</ul>
</li>
<li class="parent">B32
<ul class="child">
<li>b41</li>
<li>b42</li>
<li>b43 </li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
<li class="parent">C
<ul class="child">
<li>c11</li>
<li class="parent">c12
<ul class="child">
<li>b41</li>
<li>b42</li>
<li>b43 </li>
</ul>
</li>
<li>c13 </li>
</ul>
</li>
</ul>
</li>
</ul>
<ul>
<li> D1 </li>
<li> D2 </li>
<li> D3 </li>
</ul>
</div>
这篇关于下拉菜单自上而下的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
