Html 引导4下拉菜单位置
我使用的是bootstrap4。这是我的情况。我想做一个网站的标题与不同类别的下拉列表 这是正常情况下的情况 悬停/单击下拉列表时查看 以下是网站标题HTML的代码Html 引导4下拉菜单位置,html,css,bootstrap-4,Html,Css,Bootstrap 4,我使用的是bootstrap4。这是我的情况。我想做一个网站的标题与不同类别的下拉列表 这是正常情况下的情况 悬停/单击下拉列表时查看 以下是网站标题HTML的代码 <div id="dropdown-categories"class="container-fluid"> <ul class="list-inline d-flex justify-content-center"> <li class="l
<div id="dropdown-categories"class="container-fluid">
<ul class="list-inline d-flex justify-content-center">
<li class="list-inline-item dropdown">
<a class="categories-item dropdown-toggle" href="#" id="Hardware" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" data-offset="10,20">
Hardware
</a>
<div class="dropdown-menu" aria-labelledby="Hardware">
<div class="row">
<div class="col-md-3">
<div class="multi-column-dropdown">
<p class="dropdown-item dropdown-head">Plumbing</p>
<a class="dropdown-item" href="decorer.php">Pipes</a>
<a class="dropdown-item" href="dholwale.php">Hoses<a>
<a class="dropdown-item" href="dholwale.php">Water Taps</a>
<a class="dropdown-item" href="dholwale.php">Shower Heads</a>
<a class="dropdown-item" href="dholwale.php">Drain Cleaners</a>
<a class="dropdown-item" href="dholwale.php">Accessories</a>
</div>
</div>
<div class="col-md-3">
<ul class="multi-column-dropdown">
<p class="dropdown-item dropdown-head">Power & Hand Tools</p>
<a class="dropdown-item" href="decorer.php">Drills</a>
<a class="dropdown-item" href="dholwale.php">Measuring Tape</a>
<a class="dropdown-item" href="dholwale.php">Screwdrivers</a>
<a class="dropdown-item" href="dholwale.php">Hammers</a>
<a class="dropdown-item" href="dholwale.php">Spanners</a>
<a class="dropdown-item" href="dholwale.php">Ladders</a>
<a class="dropdown-item" href="dholwale.php">Trolleys</a>
<a class="dropdown-item" href="dholwale.php">Tools</a>
<a class="dropdown-item" href="dholwale.php">Saws</a>
<a class="dropdown-item" href="dholwale.php">Cutters</a>
<a class="dropdown-item" href="dholwale.php">Tool Boxes</a>
<a class="dropdown-item" href="dholwale.php">Tape</a>
<a class="dropdown-item" href="dholwale.php">Accessories</a>
</ul>
</div>
</div>
</div>
</li>
<li class="list-inline-item dropdown">
<a class="categories-item dropdown-toggle" href="#" id="Electrical" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" data-offset="10 20">
Electrical
</a>
<div class="dropdown-menu" aria-labelledby="Electrical" >
<div class="row">
<div class="col-md-3">
<div class="multi-column-dropdown">
<p class="dropdown-item dropdown-head">Power & Hand Tools</p>
<a class="dropdown-item" href="decorer.php">Drills</a>
</div>
</div>
</div>
</div>
</li>
<li class="list-inline-item dropdown">
<a class="categories-item dropdown-toggle" href="#" id="Household" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" data-offset="10 20">
Household
</a>
<div class="dropdown-menu" aria-labelledby="Household" >
<div class="row">
<div class="col-md-3">
<div class="multi-column-dropdown">
<p class="dropdown-item dropdown-head">Housekeeping </p>
<a class="dropdown-item" href="decorer.php">Garbage Bag</a>
</div>
</div>
</div>
</div>
</li>
</ul>
</div>
如您所见,下拉菜单的位置很奇怪。我想让所有的下拉菜单都在页面的中间,并保持相同的宽度和高度,就像这样
从类中删除宽度和高度。下拉菜单。避免使用固定的宽度和高度
/*items dropdown start */
#dropdown-categories{
background-color: #444;
}
.list-inline-item{
padding: 15px 10px;
font-size: 15px;
}
.categories-item{
color:white;
}
.categories-item:hover{
text-decoration: none;
color:white;
}
.dropdown-menu {
margin-top: 0;
width:1000px;
height:450px;
}
.dropdown-item{
font-size: 14px;
}
.dropdown:hover .dropdown-menu {
display: block;
}
/*items dropdown end */