嘿，我有一個懸停時下拉的 CSS 下拉選單。不幸的是，它沒有正確對齊，直接在“服務”下，而是在它的右邊。
我將如何更改它以使其正確對齊？我一直在慢慢添加和修改免費的 CSS 模板來制作一個自定義網站，因為我不是編碼員，這一切都是新的。我是一個視覺學習者，所以在我能理解它和我的學習方式之前一直在搞亂。但由于某種原因，我就是無法弄清楚這一點，即使在閱讀了一堆并認為我的理解是正確的之后。
任何幫助將非常感激！
.navbar-collapse {
text-align: center;
position: relative;
}
.site-header-white .navbar-nav>li>a,
.site-header-white .site-title {
color: #fff;
position: relative;
}
.nav .open>a,
.nav .open>a:focus,
.nav .open>a:hover,
.navbar-nav>li>a:hover,
.navbar-nav>li>a:focus,
.navbar-nav>li.active>a,
.navbar-collapse li a:hover,
.dropdown.open>a,
.site-header-white .dropdown.open>a,
.dropdown-menu a:hover,
.dropdown:hover>a,
.dropdown-menu>li>a:focus,
.dropdown-menu li a:hover,
.slicknav_nav>li.active a,
.slicknav_open .slicknav_arrow,
.slicknav_nav>li a:hover {
background-color: transparent;
color: #f13a11;
}
.navbar-toggle {
border-color: #fff;
margin: 0 15px 0 0;
position: relative;
top: -1px;
}
.navbar-toggle:hover,
.navbar-toggle[aria-expanded=true] {
background-color: #fff;
border-color: #000;
cursor: pointer;
}
.navbar-toggle:hover .icon-bar,
.navbar-toggle[aria-expanded=true] .icon-bar {
background-color: #000;
}
.navbar-toggle .icon-bar {
background-color: #fff;
}
.navbar-nav .dropdown-menu {
display: inline;
opacity: 0;
visibility: hidden;
border-radius: 0;
min-width: 130px;
border: 0;
border-top: 5px solid #f13a11;
top: 140%;
transition: all 0.4s;
-moz-transition: all 0.4s;
-webkit-transition: all 0.4s;
-o-transition: all 0.4s;
-ms-transition: all 0.4s;
}
.navbar-nav li a:hover .dropdown-menu,
.navbar-nav .dropdown-menu:hover {
opacity: 1;
visibility: visible;
top: 100%;
transition-delay: 0s;
display: inline-block;
}
.dropdown-menu li a {
padding: 5px 15px;
position: relative;
left: 0;
float: left;
}
.dropdown-menu li a:hover {
left: 15px;
position: relative;
}<nav class="navbar navbar-expand-lg fixed-top">
<div class="container">
<a class="navbar-brand" href="index.html">GG's Aerial Photography</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav ml-lg-auto">
<li class="nav-item">
<a href="#home" class="nav-link smoothScroll">Home</a>
</li>
<li class="nav-item">
<a href="#about" class="nav-link smoothScroll">About Us</a>
</li>
<li class="nav-item"><a href="#class" class="nav-link smoothScroll" data-toggle="dropdown">Services</a>
<ul class="dropdown-menu" role="menu" aria-labelledby="menu1">
<li><a href="services.html">Events</a></li>
<li><a href="blog.html">Real Estate</a></li>
<li><a href="blog.html">Construction</a></li>
<li><a href="blog.html">Damage</a></li>
</ul>
</li>
<li class="nav-item">
<a href="#contact" class="nav-link smoothScroll">Contact</a>
</li>
</ul>
<ul class="social-icon ml-lg-3">
<li>
<a href="#" class="fa fa-facebook"></a>
</li>
<li>
<a href="#" class="fa fa-twitter"></a>
</li>
<li>
<a href="#" class="fa fa-instagram"></a>
</li>
</ul>
</div>
</div>
</nav>uj5u.com熱心網友回復：
使用dropright類表單引導框架
<li class="nav-item"><a href="#class" class="nav-link smoothScroll dropright" data-toggle="dropdown">Services</a>
<ul class="dropdown-menu" role="menu" aria-labelledby="menu1">
<li><a href="services.html">Events</a></li>
<li><a href="blog.html">Real Estate</a></li>
<li><a href="blog.html">Construction</a></li>
<li><a href="blog.html">Damage</a></li>
</ul>
</li>
uj5u.com熱心網友回復：
在此，我提供了一個示例參考，其中包含您的下拉代碼
<style>
.dropbtn {
background-color: #04AA6D;
color: white;
padding: 16px;
font-size: 16px;
border: none;
}
.dropdown {
position: relative;
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f1f1f1;
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;
}
.dropdown-content a:hover {}
.dropdown:hover .dropdown-content {display: block;}
.dropdown:hover .dropbtn {}
</style>
.
<nav class="navbar navbar-expand-lg fixed-top">
<a class="navbar-brand" href="index.html">GG's Aerial Photography</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav ml-lg-auto">
<li class="nav-item">
<a href="#home" class="nav-link smoothScroll">Home</a>
</li>
<li class="nav-item">
<a href="#about" class="nav-link smoothScroll">About Us</a>
</li>
<div class="dropdown">
<a class="dropbtn">Services</a>
<div class="dropdown-content">
<a href="services.html">Event</a>
<a href="blog.html">Real Estate</a>
<a href="blog.html">Construction</a>
</div>
</div>
<li class="nav-item">
<a href="#contact" class="nav-link smoothScroll">Contact</a>
</li>
</ul>
<ul class="social-icon ml-lg-3">
<li>
<a href="#" class="fa fa-facebook"></a>
</li>
<li>
<a href="#" class="fa fa-twitter"></a>
</li>
<li>
<a href="#" class="fa fa-instagram"></a>
</li>
</ul>
</div>
</div>
</nav>轉載請註明出處，本文鏈接：https://www.uj5u.com/ruanti/414280.html
標籤：
上一篇：如何將全寬行放入具有影像的表格中
下一篇：我無法在導航元素中定位串列元素