css - 向右浮动导航问题

Question

嘿，我遇到了一点问题。当我将鼠标悬停在导航栏的右侧时，它会将下拉菜单向右移动一点。每隔一个导航都定位到它的绝对位置......

nav {
    padding-left: 5px
}

nav .main-nav {
    height: 80px;
    width: 100%;
    margin-top: 64px;
    background: url(../images/navHeader.png) no-repeat top;
    position: relative
}

nav .main-nav > ul {
    list-style-type: none;
   
}

nav .main-nav ul a,
nav .main-nav ul li {
    display: inline-block;
	padding: 5px;
    height: 80px;
	margin: 5px;
	
	align-content:center;
}

nav .main-nav .dropdown-content a {
  height: auto;
  line-height: initial;
  padding: 5px 0;
}

nav .main-nav ul a {
    text-align: center;
    font-weight: 700;
    font-size: 15px;
    color: #84827d;
    text-shadow: 1px 1px 1px #000;
    text-transform: uppercase;
    -webkit-transition: all .2s ease-in-out;
    transition: all .2s ease-in-out
}

nav .main-nav ul a:hover {
    text-decoration: none;
    color: #7289da
}
nav .main-nav li .dropdown {

}
nav .main-nav .dropdown-content {
    position: absolute;
	display: none;
	z-index: 10;
	-webkit-box-shadow: 0 3px 5px 0 #999;
	-moz-box-shadow: 0 3px 5px 0 #999;
	box-shadow: 0 3px 5px 0 #999;
	border: 1px solid #CCC;
	background: #0d2638;
	color: #656161;
	opacity: .8;
	top: 50px;
	
}
nav .main-nav .dropdown-content a {
    font-size: 8px;
    text-decoration: none;
    display: block;
    text-align: center;
}
nav .main-nav .dropdown-content a:hover {
    background-color: #3A4FC5
}

nav .main-nav .dropdown:hover .dropdown-content {
    display: inline-block;
}

nav .main-nav ul.left {
    float: left;
    margin-left: 5px;
}

.dropdown-content ul {
    padding: 0;
    width: auto !important;
    display: flex;
    flex-direction: column;
}

.dropdown-content ul li {
    height: auto !important;
    position: relative;
}

.dropdown-content ul li:hover > .dropdown-content-second {
    display: block;
}

.dropdown-content-second {
     position: absolute;
	display: none;
	float: left;
	z-index: 10;
	-webkit-box-shadow: 0 3px 5px 0 #999;
	-moz-box-shadow: 0 3px 5px 0 #999;
	box-shadow: 0 3px 5px 0 #999;
	border: 1px solid #CCC;
	background: #0d2638;
	color: #656161;
	opacity: .8;
	min-width: 30px;
	top: 0px;
    margin-top: -1px;
    margin-left: 1px;
    left: 100%;

}

.dropdown-content-second ul li  {
    position: relative;
}

nav .main-nav ul.right {
    float: right;
    margin-right: 25px;
}
Here is my html, thank you in advance. I've been picking my brains out to figure out why but i cant seem to manage. please help.
    

    
    <nav>
      <div class="main-nav">
        <ul class="left">
          <li><a href="index.html">Home</a></li>
          <li class="dropdown"> <a href="#">Gods</a>
            <div class="dropdown-content">
              <ul>
                <li> <a href="#">Titans</a>
                  <div class="dropdown-content-second">
                    <ul>
                      <li> <a href="hades.html">Hades</a> </li>
                    </ul>
                  </div>
                </li>
              </ul>
            </div>
          </li>
          <li class="dropdown"> <a href="#">Goddesses</a>
            <div class="dropdown-content">
              <ul>
                <li> <a href="#">Olympians</a>
                  <div class="dropdown-content-second">
                    <ul>
                      <li> <a href="#">Hera</a> </li>
                    </ul>
                  </div>
                </li>
                <li> <a href="#">Other Goddesess</a>
                  <div class="dropdown-content-second">
                    <ul>
                      <li> <a href="#">Gaera</a> </li>
                    </ul>
                  </div>
                </li>
              </ul>
            </div>
          </li>
        </ul>
        <div class="play-now"></div>
        <ul class="right">
          <li class="dropdown"> <a href="#">Heroes</a>
            <div class="dropdown-content">
              <ul>
                <li> <a href="#">Achillies</a> </li>
                <li> <a href="#">Theseus</a> </li>
              </ul>
        </div>
      </li>
      <li class="dropdown"> <a href="#">Myths</a>
        <div class="dropdown-content">
          <ul>
            <li> <a href="#">THE ADVENTURES OF PERSEUS</a> </li>
          </ul>
        </div>
      </li>
      <li><a href="#">Contact Us</a></li>
    </ul>
  </div>
</nav>

Answer 1

试试这个 CSS

nav {
    padding-left: 5px
}

nav .main-nav {
    height: 80px;
    width: 100%;
    margin-top: 64px;
    background: url(../images/navHeader.png) no-repeat top;
    position: relative
}

nav .main-nav > ul {
    list-style-type: none;

}

nav .main-nav ul a,
nav .main-nav ul li {
    display: inline-block;
    padding: 5px;
    height: 80px;
    margin: 5px;

    align-content:center;
}

nav .main-nav .dropdown-content a {
  height: auto;
  line-height: initial;
  padding: 5px 0;
}

nav .main-nav ul a {
    text-align: center;
    font-weight: 700;
    font-size: 15px;
    color: #84827d;
    text-shadow: 1px 1px 1px #000;
    text-transform: uppercase;
    -webkit-transition: all .2s ease-in-out;
    transition: all .2s ease-in-out
}

nav .main-nav ul a:hover {
    text-decoration: none;
    color: #7289da
}
nav .main-nav li.dropdown {
    position: relative;
}
nav .main-nav .dropdown-content {
    position: absolute;
    display: none;
    z-index: 10;
    -webkit-box-shadow: 0 3px 5px 0 #999;
    -moz-box-shadow: 0 3px 5px 0 #999;
    box-shadow: 0 3px 5px 0 #999;
    border: 1px solid #CCC;
    background: #0d2638;
    color: #656161;
    opacity: .8;
    top : 35px;

}
nav .main-nav .dropdown-content a {
    font-size: 8px;
    text-decoration: none;
    display: block;
    text-align: center;
}
nav .main-nav .dropdown-content a:hover {
    background-color: #3A4FC5
}

nav .main-nav .dropdown:hover .dropdown-content {
    display: inline-block;
}

nav .main-nav ul.left {
    float: left;
    margin-left: 5px;
}

.dropdown-content ul {
    padding: 0;
    width: auto !important;
    display: flex;
    flex-direction: column;
}

.dropdown-content ul li {
    height: auto !important;
    position: relative;
}

.dropdown-content ul li:hover > .dropdown-content-second {
    display: block;
}

.dropdown-content-second {
     position: absolute;
    display: none;
    float: left;
    z-index: 10;
    -webkit-box-shadow: 0 3px 5px 0 #999;
    -moz-box-shadow: 0 3px 5px 0 #999;
    box-shadow: 0 3px 5px 0 #999;
    border: 1px solid #CCC;
    background: #0d2638;
    color: #656161;
    opacity: .8;
    min-width: 30px;
    top: 0px;
    margin-top: -1px;
    margin-left: 1px;
    left: 100%;

}

.dropdown-content-second ul li  {
    position: relative;
}

nav .main-nav ul.right {
    float: right;
    margin-right: 25px;
}