CSS 下拉菜单 - 未正确对齐

Question

Hey I have a CSS dropdown menu that drops down on hover. Unfortunately its not aligned correctly, directly under "services", but to the right of it.

How would I change it so its aligned correctly? I've been slowly adding and modifying free CSS templates to make a custom website, as I'm no coder and this is all kinda new. I'm a visual learner, so messing around until I can understand it and my way of learning..but for some reason I just can't figure this out, even after reading a bunch and thinking I had it correct.

Any help would be much appreciated!

 .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>

Answer 1

Use dropright class form bootstrap Framework

<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>

Answer 2

Herewith I have provided a sample reference with your code for dropdown

 <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>