CSS Dropdown Menu - not aligning correctly-CodePudding

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

    <a  href="index.html">GG's Aerial Photography</a>

    <button  type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
                <span ></span>
            </button>

    <div  id="navbarNav">

      <ul >
        <li >
          <a href="#home" >Home</a>
        </li>


        <li >
          <a href="#about" >About Us</a>
        </li>


        <li ><a href="#class"  data-toggle="dropdown">Services</a>
          <ul  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 >
          <a href="#contact" >Contact</a>
        </li>
      </ul>




      <ul >
        <li>
          <a href="#" ></a>
        </li>
        <li>
          <a href="#" ></a>
        </li>
        <li>
          <a href="#" ></a>
        </li>
      </ul>
    </div>

  </div>
</nav>

CodePudding user response：

Use dropright class form bootstrap Framework

<li ><a href="#class"  data-toggle="dropdown">Services</a>
   <ul  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>

CodePudding user response：

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 >
 

    <a  href="index.html">GG's Aerial Photography</a>

    <button  type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
                <span ></span>
            </button>

    <div  id="navbarNav">

      <ul >
        <li >
          <a href="#home" >Home</a>
        </li>


        <li >
          <a href="#about" >About Us</a>
        </li>
       
       
       <div >
  <a >Services</a>
  <div >
    <a href="services.html">Event</a>
    <a href="blog.html">Real Estate</a>
    <a href="blog.html">Construction</a>
  </div>
</div>

        
        


        <li >
          <a href="#contact" >Contact</a>
        </li>
      </ul>




      <ul >
        <li>
          <a href="#" ></a>
        </li>
        <li>
          <a href="#" ></a>
        </li>
        <li>
          <a href="#" ></a>
        </li>
      </ul>
    </div>

  </div>
</nav>