在下拉列表中显示并排列表（ul）
我一直在用HTML和CSS挣扎，我想在下拉列表中并排，内联和居中显示列表？一旦找出正确的方法，我将在所有下拉菜单中使用div，其类名称分别为“ left”，“ middle”和“ right”。
这是我必须要做的事情的照片：
因此，就像您在上图中的浴池下拉菜单中看到的那样，我将它们分为3列，它们不是内联的，并且我似乎无法消除的两边都有间隙？最终，我将在每个下拉列表上都有一个额外的列，其中将包含一个图像。
任何帮助都将是巨大的，到目前为止，与我所有的问题一样，简要说明为什么会如此出色，这样我就可以在学习的同时更好地理解。
这是一个小提琴
https://jsfiddle.net/qesmow58/5/
.header-menu-wrap {
display: inline-block;
width: 100%;
text-align: center;
}
.headermenu {
padding: 0 10% 0 10%;
height: 30px;
background-color: #17D8C7;
}
.headermenu a {
text-decoration: none;
}
.headermenu>ul>li>a {
display: inline-block;
text-align: center;
text-decoration: none;
color: white;
}
.headermenu ul {
padding-left: 0;
list-style: none;
}
.headermenu .arrow {
line-height: 0%;
font-size: 8px
}
.headermenu>ul>li {
position: relative;
display: inline-block;
vertical-align: top;
margin-left: 0.5%;
margin-right: 0.5%;
line-height: 30px;
}
.headermenu>ul>li>div {
display: none;
position: absolute;
top: 100%;
border: 1px solid #aa2ebf;
background-color: white;
width: 450px;
}
.headermenu>ul>li:hover>div {
display: block;
}
.left,
.middle,
.right {
display: inline-block;
}<div class="header-menu-wrap">
<nav class="headermenu">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">ON SALE</a></li>
<li><a href="#">Suites</a></li>
<li><a href="#">Baths<span class="arrow">▼</span></a>
<div>
<div class="left">
<ul class="bathdropdown1">
<li>
<h3>Bath Types</h3>
</li>
<li><a href="#">Standard</a></li>
<li><a href="#">L-Shaped</a></li>
<li><a href="#">B-Shaped</a></li>
</ul>
</div>
<div class="middle">
<ul class="bathdropdown2">
<li>
<h3>Bath Accessories</h3>
</li>
<li><a href="#">Bath Screens</a></li>
<li><a href="#">Bath Panels</a></li>
</ul>
</div>
<div class="right">
<ul class="bathdropdown3">
<li>
<h3>All Baths</h3>
</li>
<li><a href="#">All</a></li>
</ul>
</div>
</div>
</li>
<li><a href="#">Toilets<span class="arrow">▼</span></a>
<div>
<ul class="toiletdropdown1">
<li>
<h3>Toilet Style</h3>
</li>
<li><a href="#">Back to Wall</a></li>
<li><a href="#">Close Coupled</a></li>
<li><a href="#">Comfort Height</a></li>
<li><a href="#">Fully Back to Wall</a></li>
<li><a href="#">Low Level</a></li>
<li><a href="#">Toilet and Basin Units</a></li>
</ul>
<ul class="toiletdropdown2">
<li>
<h3>Toilet Accessories</h3>
</li>
<li><a href="#">Concealed Cisterns</a></li>
</ul>
<ul class="toiletdropdown3">
<li>
<h3>All Toilet Types</h3>
</li>
<li><a href="#">All</a></li>
</ul>
</div>
</li>
<li><a href="#">Basins<span class="arrow">▼</span></a>
<div>
<ul class="basindropdown1">
<li>
<h3>Style</h3>
</li>
<li><a href="#">Basin and Pedestal</a></li>
<li><a href="#">Cloakroom</a></li>
</ul>
<ul class="basindropdown2">
<li>
<h3>All Basins</h3>
</li>
<li><a href="#">All Basins</a></li>
</ul>
</div>
</li>
<li><a href="#">Shower Enclosures<span class="arrow">▼</span></a>
<div>
<ul class="showerenclosuredropdown1">
<li>
<h3>Amelia Enclosures
<h3>
</li>
<li><a href="#">Amelia Bifold Door</a></li>
<li><a href="#">Amelia Enclosure Side Panels</a></li>
<li><a href="#">Amelia Pivot Door</a></li>
<li><a href="#">Amelia Quadrant Enclosure</a></li>
<li><a href="#">Amelia Sliding Door</a></li>
</ul>
<ul class="showerenclosuredropdown2">
<li>
<h3>Sienna Enclosures</h3>
</li>
<li><a href="#">Sienna Quadrant</a></li>
<li><a href="#">Sienna Bifold Door</a></li>
<li><a href="#">Sienna Pivot Door</a></li>
<li><a href="#">Sienna Sliding Door</a></li>
<li><a href="#">Sienna Wet Room Screen</a></li>
<li><a href="#">Sienna Enclosure Side Panels</a></li>
</ul>
<ul class="showerenclosuredropdown3">
<li>
<h3>Show Trays</h3>
</li>
<li><a href="#">Shower Trays</a></li>
<li><a href="#">Riser Kits</a></li>
</ul>
</div>
</li>
<li><a href="#">Furniture<span class="arrow">▼</span></a>
<div>
<ul class="furnituredropdown1">
<li>
<h3>Collection</h3>
</li>
<li><a href="#">Bella Collection</a></li>
<li><a href="#">Caprice Collection</a></li>
<li><a href="#">Gino Collection</a></li>
<li><a href="#">Shine Collection</a></li>
<li><a href="#">Sienna Collection</a></li>
<li><a href="#">Valentino Collection</a></li>
</ul>
<ul class="furnituredropdown2">
<li>
<h3>Unit Type</h3>
</li>
<li><a href="#">Vanity Unit and Basin</a></li>
<li><a href="#">Wall Vanity Unit and Basin</a></li>
<li><a href="#">Corner Vanity Unit and Basin</a></li>
<li><a href="#">Back to Wall Units</a></li>
<li><a href="#">Cupboard Units</a></li>
<li><a href="#">Mini Units</a></li>
</ul>
</div>
</li>
<li><a href="#">Showers<span class="arrow">▼</span></a>
<div>
<ul class="showersdropdown1">
<li>
<h3>Style</h3>
</li>
<li><a href="#">Round Head</a></li>
<li><a href="#">Square Head</a></li>
</ul>
</div>
</li>
<li><a href="#">Taps<span class="arrow">▼</span></a>
<div>
<ul class="tapsdropdown1">
<li>
<h3>Bathroom Taps</h3>
</li>
<li><a href="#">Mono Mixer</a></li>
<li><a href="#">Bath Shower Mixer</a></li>
<li><a href="#">Mini Mono Mixer</a></li>
<li><a href="#">Bath Filler</a></li>
</ul>
<ul class="tapsdropdown2">
<li>
<h3>Kitchen Taps</h3>
</li>
<li><a href="#">All</a></li>
</ul>
<ul class="tapsdropdown3">
<li>
<h3>All Taps</h3>
</li>
<li><a href="#">All</a></li>
</ul>
</div>
</li>
<li><a href="#">Accessories<span class="arrow">▼</span></a>
<div>
<ul class="accessoriesdropdown1">
<li><a href="#">Wastes</a></li>
</ul>
</div>
</li>
</ul>
</nav>
</div>
2 个答案:
答案 0 :(得分：1)
将此添加到您的CSS
.left, .middle, .right {
float: left;
width: 33.3%;
box-sizing: border-box;
}
答案 1 :(得分：0)
- 为
div提供一个用于包装下拉项目的类，以便您可以特定于该特定div。在这里，我给了sub-menu-container类 - 将
vertical-align: top添加到.left, .middle, .right。这是 因为您已经为它们设置了display: inline-block。
.header-menu-wrap {
display: inline-block;
width: 100%;
text-align: center;
}
.headermenu {
padding: 0 10% 0 10%;
height: 30px;
background-color: #17D8C7;
}
.headermenu a {
text-decoration: none;
}
.headermenu > ul > li > a {
display: inline-block;
text-align: center;
text-decoration: none;
color: white;
}
.headermenu ul {
padding-left: 0;
list-style: none;
}
.headermenu .arrow {
line-height: 0%;
font-size: 8px
}
.headermenu > ul > li {
position: relative;
display: inline-block;
vertical-align: top;
margin-left: 0.5%;
margin-right: 0.5%;
line-height: 30px;
}
.headermenu > ul > li > div.sub-menu-container {
display: none;
position: absolute;
top: 100%;
border: 1px solid #aa2ebf;
background-color: white;
width: 450px;
}
.headermenu > ul > li:hover > div {
display: block;
}
.left, .middle, .right {
display: inline-block;
vertical-align: top;
}<div class="header-menu-wrap">
<nav class="headermenu">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">ON SALE</a></li>
<li><a href="#">Suites</a></li>
<li>
<a href="#">Baths<span class="arrow">▼</span></a>
<div class="sub-menu-container">
<div class="left">
<ul class="bathdropdown1">
<li>
<h3>Bath Types</h3>
</li>
<li><a href="#">Standard</a></li>
<li><a href="#">L-Shaped</a></li>
<li><a href="#">B-Shaped</a></li>
</ul>
</div>
<div class="middle">
<ul class="bathdropdown2">
<li>
<h3>Bath Accessories</h3>
</li>
<li><a href="#">Bath Screens</a></li>
<li><a href="#">Bath Panels</a></li>
</ul>
</div>
<div class="right">
<ul class="bathdropdown3">
<li>
<h3>All Baths</h3>
</li>
<li><a href="#">All</a></li>
</ul>
</div>
</div>
</li>
<li>
<a href="#">Toilets<span class="arrow">▼</span></a>
<div class="sub-menu-container">
<ul class="toiletdropdown1">
<li>
<h3>Toilet Style</h3>
</li>
<li><a href="#">Back to Wall</a></li>
<li><a href="#">Close Coupled</a></li>
<li><a href="#">Comfort Height</a></li>
<li><a href="#">Fully Back to Wall</a></li>
<li><a href="#">Low Level</a></li>
<li><a href="#">Toilet and Basin Units</a></li>
</ul>
<ul class="toiletdropdown2">
<li>
<h3>Toilet Accessories</h3>
</li>
<li><a href="#">Concealed Cisterns</a></li>
</ul>
<ul class="toiletdropdown3">
<li>
<h3>All Toilet Types</h3>
</li>
<li><a href="#">All</a></li>
</ul>
</div>
</li>
<li>
<a href="#">Basins<span class="arrow">▼</span></a>
<div class="sub-menu-container">
<ul class="basindropdown1">
<li>
<h3>Style</h3>
</li>
<li><a href="#">Basin and Pedestal</a></li>
<li><a href="#">Cloakroom</a></li>
</ul>
<ul class="basindropdown2">
<li>
<h3>All Basins</h3>
</li>
<li><a href="#">All Basins</a></li>
</ul>
</div>
</li>
<li>
<a href="#">Shower Enclosures<span class="arrow">▼</span></a>
<div class="sub-menu-container">
<ul class="showerenclosuredropdown1">
<li>
<h3>Amelia Enclosures</h3>
</li>
<li><a href="#">Amelia Bifold Door</a></li>
<li><a href="#">Amelia Enclosure Side Panels</a></li>
<li><a href="#">Amelia Pivot Door</a></li>
<li><a href="#">Amelia Quadrant Enclosure</a></li>
<li><a href="#">Amelia Sliding Door</a></li>
</ul>
<ul class="showerenclosuredropdown2">
<li>
<h3>Sienna Enclosures</h3>
</li>
<li><a href="#">Sienna Quadrant</a></li>
<li><a href="#">Sienna Bifold Door</a></li>
<li><a href="#">Sienna Pivot Door</a></li>
<li><a href="#">Sienna Sliding Door</a></li>
<li><a href="#">Sienna Wet Room Screen</a></li>
<li><a href="#">Sienna Enclosure Side Panels</a></li>
</ul>
<ul class="showerenclosuredropdown3">
<li>
<h3>Show Trays</h3>
</li>
<li><a href="#">Shower Trays</a></li>
<li><a href="#">Riser Kits</a></li>
</ul>
</div>
</li>
<li>
<a href="#">Furniture<span class="arrow">▼</span></a>
<div class="sub-menu-container">
<ul class="furnituredropdown1">
<li>
<h3>Collection</h3>
</li>
<li><a href="#">Bella Collection</a></li>
<li><a href="#">Caprice Collection</a></li>
<li><a href="#">Gino Collection</a></li>
<li><a href="#">Shine Collection</a></li>
<li><a href="#">Sienna Collection</a></li>
<li><a href="#">Valentino Collection</a></li>
</ul>
<ul class="furnituredropdown2">
<li>
<h3>Unit Type</h3>
</li>
<li><a href="#">Vanity Unit and Basin</a></li>
<li><a href="#">Wall Vanity Unit and Basin</a></li>
<li><a href="#">Corner Vanity Unit and Basin</a></li>
<li><a href="#">Back to Wall Units</a></li>
<li><a href="#">Cupboard Units</a></li>
<li><a href="#">Mini Units</a></li>
</ul>
</div>
</li>
<li>
<a href="#">Showers<span class="arrow">▼</span></a>
<div class="sub-menu-container">
<ul class="showersdropdown1">
<li>
<h3>Style</h3>
</li>
<li><a href="#">Round Head</a></li>
<li><a href="#">Square Head</a></li>
</ul>
</div>
</li>
<li>
<a href="#">Taps<span class="arrow">▼</span></a>
<div class="sub-menu-container">
<ul class="tapsdropdown1">
<li>
<h3>Bathroom Taps</h3>
</li>
<li><a href="#">Mono Mixer</a></li>
<li><a href="#">Bath Shower Mixer</a></li>
<li><a href="#">Mini Mono Mixer</a></li>
<li><a href="#">Bath Filler</a></li>
</ul>
<ul class="tapsdropdown2">
<li>
<h3>Kitchen Taps</h3>
</li>
<li><a href="#">All</a></li>
</ul>
<ul class="tapsdropdown3">
<li>
<h3>All Taps</h3>
</li>
<li><a href="#">All</a></li>
</ul>
</div>
</li>
<li>
<a href="#">Accessories<span class="arrow">▼</span></a>
<div class="sub-menu-container">
<ul class="accessoriesdropdown1">
<li><a href="#">Wastes</a></li>
</ul>
</div>
</li>
</ul>
</nav>
</div>
工作小提琴here
相关问题
最新问题
- 我写了这段代码，但我无法理解我的错误
- 我无法从一个代码实例的列表中删除 None 值，但我可以在另一个实例中。为什么它适用于一个细分市场而不适用于另一个细分市场？
- 是否有可能使 loadstring 不可能等于打印？卢阿
- java中的random.expovariate()
- Appscript 通过会议在 Google 日历中发送电子邮件和创建活动
- 为什么我的 Onclick 箭头功能在 React 中不起作用？
- 在此代码中是否有使用“this”的替代方法？
- 在 SQL Server 和 PostgreSQL 上查询，我如何从第一个表获得第二个表的可视化
- 每千个数字得到
- 更新了城市边界 KML 文件的来源？