gpt4 book ai didi

html - 导航栏下拉菜单列表中的第二列

转载 作者:行者123 更新时间:2023-11-28 01:27:16 25 4
gpt4 key购买 nike

您好,我制作了一个带有导航栏的网页。导航栏上有鼠标悬停下拉菜单。我已经从 w3school 网站获取了这个导航栏的代码。代码是

ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
}

li {
float: left;
}

li a,
.dropbtn {
display: inline-block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}

li a:hover,
.dropdown:hover .dropbtn {
background-color: red;
}

li.dropdown {
display: inline-block;
}

.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
z-index: 1;
}

.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
}

.dropdown-content a:hover {
background-color: #f1f1f1
}

.dropdown:hover .dropdown-content {
display: block;
}
<ul>
<li><a href="#home">Home</a></li>
<li><a href="#news">News</a></li>
<li class="dropdown">
<a href="javascript:void(0)" class="dropbtn">Dropdown</a>
<div style="display:flex">
<div class="dropdown-content">
<a href="#">Link 1</a>
<a href="#">Link 2</a>
<a href="#">Link 3</a>
</div>

<div class="dropdown-content">
<a href="#">List 4</a>
<a href="#">List 5</a>
<a href="#">List 6</a>
</div>
</div>
</li>
</ul>

<h3>Dropdown Menu inside a Navigation Bar</h3>
<p>Hover over the "Dropdown" link to see the dropdown menu.</p>

现在的问题是我想在下拉列表中的第一列前面添加第二列。为此我添加了第二个 div 但第二个 div 的所有内容都出现在第一个 div 的位置并隐藏了内容第一个分区请告诉我如何将第二个 div 放在第一个 div 的旁边,以便它们看起来彼此平行。请回答这个问题。我会非常感谢你。

最佳答案

您可以通过用 flexbox 包装 .dropdown-content div 来放置它。

我已经添加了.wrapper 类,您可以将其更改为您喜欢的任何内容。这是代码:

ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
}

li {
float: left;
}

li a, .dropbtn {
display: inline-block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}

li a:hover, .dropdown:hover .dropbtn {
background-color: red;
}

li.dropdown {
display: inline-block;
}

.wrapper {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}

.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
}

.dropdown-content a:hover {background-color: #f1f1f1}

.dropdown:hover .wrapper{
display: flex;
justify-content: center;
}
<ul>
<li><a href="#home">Home</a></li>
<li><a href="#news">News</a></li>
<li class="dropdown">
<a href="javascript:void(0)" class="dropbtn">Dropdown</a>
<div class="wrapper">
<div class="dropdown-content">
<a href="#">Link 1</a>
<a href="#">Link 2</a>
<a href="#">Link 3</a>
</div>
<div class="dropdown-content">
<a href="#">demo </a>
<a href="#">demo</a>
<a href="#">demo</a>
</div>
</div>
</li>
</ul>

附言以同样的方式,您可以使用 flexbox 创建多个并排的 div。您可以了解 flex here

关于html - 导航栏下拉菜单列表中的第二列,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/51175126/

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