CSS标题错误 - 悬停更改位置

Question

已编辑以包含标题HTML / CSS

我正在http://tremor.yt/Site/Creators.html处理我的标题。

有一个错误，当用户从右到左悬停在标题中的链接时，链接的位置都会混乱。不知道发生了什么。

我很想成为一个JSFiddle，但我已经尝试了，它似乎没有成功，因为它与我的页面紧密相关，你可以在这里看到：http://tremor.yt/Site/Creators.html。

标题HTML：

<!-- HEADER -->



    <header>
        <div class="Header">
            <div class="Header_Container">
                <a href="www.xenova.tv"><div class="Logo"></div></a>

<!-- NAVIGATION -->

                <div class="middle-nav">
<ul id="menu">
    <li>
        <a href="Home.html"><div class="HOME" class="nav_hover">HOME</div></a>
    </li>
    <li><a href="Creators.html"><div class="CREATORS  nav_hover">CREATORS</div></a>

        <ul class="sub-menu cnav">
            <li class="sub-menu-style"><a href="#" class="sub-menu click">
                 <span style="font-size:85%;">WHY XENOVA</span></a>
            </li>
            <li class="sub-menu-style"><a href="#" class="sub-menu click">
                 <span style="font-size:85%;">SPOTLIGHT</span></a>
            </li>
            <li class="sub-menu-style"><a href="#" class="sub-menu click">
                 <span style="font-size:85%;">FAQ</span></a>
            </li>
            <li class="sub-menu-style"><a href="#" class="sub-menu click">
                <span style="font-size:85%;">JOIN</span></a>
            </li>
        </ul>
    </li>
    <li>
        <a href="#"><div class="VERTICALS  nav_hover">VERTICALS</div></a>

                <ul class="sub-menu vnav">
            <li class="sub-menu-style"><a href="#" class="sub-menu click">
                 <span style="font-size:85%;">ABOUT</span></a>
            </li>
            <li class="sub-menu-style"><a href="#" class="sub-menu click">
                 <span style="font-size:85%;">SPOTLIGHT</span></a>
            </li>
            <li class="sub-menu-style"><a href="#" class="sub-menu click">
                 <span style="font-size:85%;">FAQ</span></a>
            </li>
            <li class="sub-menu-style"><a href="#" class="sub-menu click">
                <span style="font-size:85%;">INQUIRE</span></a>
            </li>
        </ul>

    </li>
    <li><a href="#"><div class="XENOVA_  nav_hover">XENOVA+</div></a>

                    <ul class="sub-menu Xnav">
            <li class="sub-menu-style"><a href="#" class="sub-menu click">
                 <span style="font-size:85%;">PREMIUMS</span></a>
            </li>
            <li class="sub-menu-style"><a href="#" class="sub-menu click">
                 <span style="font-size:85%;">FAQ</span></a>
            </li>
            <li class="sub-menu-style"><a href="#" class="sub-menu click">
                 <span style="font-size:85%;">JOIN</span></a>
            </li>
        </ul>

    </li>
    <li><a href="#"><div class="ABOUT  nav_hover">ABOUT</div></a>

            <ul class="sub-menu anav">
            <li class="sub-menu-style"><a href="#" class="sub-menu click">
                 <span style="font-size:85%;">WHAT WE DO</span></a>
            </li>
            <li class="sub-menu-style"><a href="#" class="sub-menu click">
                 <span style="font-size:85%;">HISTORY</span></a>
            </li>
            <li class="sub-menu-style"><a href="#" class="sub-menu click">
                 <span style="font-size:85%;">FUTURE</span></a>
            </li>
            <li class="sub-menu-style"><a href="#" class="sub-menu click">
                <span style="font-size:85%;">CONTACT</span></a>
            </li>
        </ul>

    </li>
    <li>
        <a href="#"><div class="CONTACT nav_hover">CONTACT</div></a>
    </li>
    <li>
        <a href="http://wellspringinfotech.com/kyle/form/login.php"><div class="LOG_IN nav_hover">LOG IN</div></a>
    </li></ul></div> 

<!-- END NAVIGATION -->

<!-- SOCIAL LINKS -->

        <a href="http://www.twitter.com"><div class="Icon_BG1"></div></a>
        <a href="http://www.skype.com"><div class="Icon_BG_2"></div></a>

<!-- END SOCIAL LINKS -->

        </div> <!-- Header Container -->
    </div> <!-- Header -->
    </header>

<!-- END HEADER -->

标题CSS：

/* HEADER CSS */

.Header {
  position: fixed;
  left: 0px;
  top: 0px;
  width: 100%;
  height: 100px;
  z-index: 94;
  background-color: #FFFFFF;
      -webkit-transition: height 0.6s;
    -moz-transition: height 0.6s;
    transition: height 0.6s;
      -webkit-transition: background-color 0.6s;
}
.Header.small {
  position: fixed;
  left: 0px;
  top: 0px;
  width: 100%;
  height: 60px;
  z-index: 94;
  background-color: #fff;
      -webkit-transition: height 0.6s;
    -moz-transition: height 0.6s;
    transition: height 0.6s;
  -webkit-transition: background-color 0.6s;
  -webkit-box-shadow: 0px 3px 5px rgba(100, 100, 100, 0.3);
-moz-box-shadow:    0px 3px 5px rgba(100, 100, 100, 0.3);
box-shadow:         0px 3px 5px rgba(100, 100, 100, 0.3);
}
.Header_Container {
  width:1000px;
  margin-left:auto;
  margin-right:auto;
}
.Sub_menus {
  position: absolute;
  left: 0px;
  top: 0px;
  width: 1912px;
  height: 2292px;
  z-index: 93;
}
    .nav_hover:hover {
    color: #c1c1c1;
    -webkit-transition: color .25s;
    }
.Icon_BG_2 {
  background: url("images/IconBG2.png") no-repeat;
  background-size: contain;
  position: absolute;
  margin-left: 960px;
  top: 26px;
  width: 45px;
  height: 48px;
  z-index: 82;
  -webkit-transition: background-image .5s;
    -webkit-transition: width .5s;
  -webkit-transition: height .5s;
}
.Icon_BG_2.small {
  background: url("images/IconBG2.png") no-repeat;
  background-size: contain;
  position: absolute;
  margin-left: 960px;
  top: 10px;
  width: 35px;
  height: 35px;
  z-index: 82;
  -webkit-transition: background-image .5s;
    -webkit-transition: width .5s;
  -webkit-transition: height .5s;
}
.Icon_BG_2.small:hover {
  background: url("images/IconBGHover2.png") no-repeat;
  background-size: contain;
  position: absolute;
  margin-left: 960px;
  top: 10px;
  width: 35px;
  height: 35px;
  z-index: 82;
  -webkit-transition: background-image .5s;
}
.Icon_BG_2:hover {
  background: url("images/IconBGHover2.png") no-repeat;
  position: absolute;
  margin-left:960x;
  top: 26px;
  width: 45px;
  height: 48px;
  z-index: 82;
  -webkit-transition: background-image .5s;
}
.Icon_BG1 {
  background: url("images/IconBG.png") no-repeat;
    background-size: contain;
  position: absolute;
  margin-left: 905px;
  top: 26px;
  width: 45px;
  height: 48px;
  z-index: 80;
  -webkit-transition: background-image .5s;
    -webkit-transition: width .5s;
  -webkit-transition: height .5s;
}
.Icon_BG1.small {
  background: url("images/IconBG.png") no-repeat;
  position: absolute;
  margin-left: 905px;
  top: 10px;
  background-size: contain;
  width: 35px;
  height: 35px;
  z-index: 80;
  -webkit-transition: background-image .5s;
  -webkit-transition: width .5s;
  -webkit-transition: height .5s;
}
.Icon_BG1.small:hover {
  background: url("images/IconBGHover.png") no-repeat;
  position: absolute;
  margin-left: 905px;
  top: 10px;
  background-size: contain;
  width: 35px;
  height: 35px;
  z-index: 80;
  -webkit-transition: background-image .5s;

}
.Icon_BG1:hover {
  background: url("images/IconBGHover.png") no-repeat;
  position: absolute;
  margin-left:905px;
  top: 26px;
  width: 45px;
  height: 48px;
  z-index: 80;
  -webkit-transition: background-image .5s;
}
.LOG_IN {
  font-size: 17px;
  font-family: "Lato";
  color: rgb( 51, 51, 51 );
  text-align: center;
  -moz-transform: scale(0.91, 0.9);
  -webkit-transform: scale(0.91, 0.9);
  -ms-transform: scale(0.91, 0.9);
  top: 40px;
  z-index: 74;
  height: 60px;
  position:absolute;
  margin-left:660px;
    -webkit-transition: top .5s;
    -webkit-transition: font-size .5s;
  }
 .LOG_IN.small {
  font-size: 14px;
  font-family: "Lato";
  color: rgb( 51, 51, 51 );
  text-align: center;
  -moz-transform: scale(0.91, 0.9);
  -webkit-transform: scale(0.91, 0.9);
  -ms-transform: scale(0.91, 0.9);
  top: 20px;
  z-index: 74;
  height: 60px;
  position:absolute;
  -webkit-transition: top .5s;
      -webkit-transition: font-size .5s;
}
.CONTACT {
  font-size: 17px;
  font-family: "Lato";
  color: rgb( 51, 51, 51 );
  text-align: center;
  -moz-transform: scale(0.91, 0.9);
  -webkit-transform: scale(0.91, 0.9);
  -ms-transform: scale(0.91, 0.9);
  top: 40px;
  z-index: 74;
  height: 60px;
  position:absolute;
  margin-left:540px;
    -webkit-transition: top .5s;
    -webkit-transition: font-size .5s;
}
.CONTACT.small {
  font-size: 14px;
  font-family: "Lato";
  color: rgb( 51, 51, 51 );
  text-align: center;
  -moz-transform: scale(0.91, 0.9);
  -webkit-transform: scale(0.91, 0.9);
  -ms-transform: scale(0.91, 0.9);
  top: 20px;
  z-index: 74;
  height: 60px;
  position:absolute;
  -webkit-transition: top .5s;
      -webkit-transition: font-size .5s;
}
.ABOUT {
  font-size: 17px;
  font-family: "Lato";
  color: rgb( 51, 51, 51 );
  text-align: center;
  -moz-transform: scale(0.91, 0.9);
  -webkit-transform: scale(0.91, 0.9);
  -ms-transform: scale(0.91, 0.9);
  top: 40px;
  z-index: 74;
  height: 60px;
  position:absolute;
  margin-left:450px;
    -webkit-transition: top .5s;
    -webkit-transition: font-size .5s;
}
.ABOUT.small {
  font-size: 14px;
  font-family: "Lato";
  color: rgb( 51, 51, 51 );
  text-align: center;
  -moz-transform: scale(0.91, 0.9);
  -webkit-transform: scale(0.91, 0.9);
  -ms-transform: scale(0.91, 0.9);
  top: 20px;
  z-index: 74;
  height: 60px;
  position:absolute;
  -webkit-transition: top .5s;
      -webkit-transition: font-size .5s;
}
.XENOVA_ {
  font-size: 17px;
  font-family: "Lato";
  color: rgb( 51, 51, 51 );
  text-align: center;
  -moz-transform: scale(0.91, 0.9);
  -webkit-transform: scale(0.91, 0.9);
  -ms-transform: scale(0.91, 0.9);
  top: 40px;
  z-index: 74;
  height: 60px;
  position:absolute;
  margin-left:330px;
    -webkit-transition: top .5s;
    -webkit-transition: font-size .5s;
}
.XENOVA_.small {
  font-size: 14px;
  font-family: "Lato";
  color: rgb( 51, 51, 51 );
  text-align: center;
  -moz-transform: scale(0.91, 0.9);
  -webkit-transform: scale(0.91, 0.9);
  -ms-transform: scale(0.91, 0.9);
  top: 20px;
  z-index: 74;
  height: 60px;
  position:absolute;
  -webkit-transition: top .5s;
      -webkit-transition: font-size .5s;
}
.VERTICALS {
  font-size: 17px;
  font-family: "Lato";
  color: rgb( 51, 51, 51 );
  text-align: center;
  -moz-transform: scale(0.91, 0.9);
  -webkit-transform: scale(0.91, 0.9);
  -ms-transform: scale(0.91, 0.9);
  top: 40px;
  z-index: 74;
  height: 60px;
  position:absolute;
  margin-left:210px;
    -webkit-transition: top .5s;
    -webkit-transition: font-size .5s;
}
.VERTICALS.small {
  font-size: 14px;
  font-family: "Lato";
  color: rgb( 51, 51, 51 );
  text-align: center;
  -moz-transform: scale(0.91, 0.9);
  -webkit-transform: scale(0.91, 0.9);
  -ms-transform: scale(0.91, 0.9);
  top: 20px;
  z-index: 74;
  height: 60px;
  position:absolute;
  -webkit-transition: top .5s;
      -webkit-transition: font-size .5s;
}
.CREATORS {
  font-size: 17px;
  font-family: "Lato";
  color: rgb( 51, 51, 51 );
  text-align: center;
  -moz-transform: scale(0.91, 0.9);
  -webkit-transform: scale(0.91, 0.9);
  -ms-transform: scale(0.91, 0.9);
  top: 40px;
  z-index: 74;
  height: 60px;
  position:absolute;
  margin-left:90px;
    -webkit-transition: top .5s;
    -webkit-transition: font-size .5s;
}
.CREATORS.small {
  font-size: 14px;
  font-family: "Lato";
  color: rgb( 51, 51, 51 );
  text-align: center;
  -moz-transform: scale(0.91, 0.9);
  -webkit-transform: scale(0.91, 0.9);
  -ms-transform: scale(0.91, 0.9);
  top: 20px;
  z-index: 74;
  height: 60px;
  position:absolute;
  -webkit-transition: top .5s;
      -webkit-transition: font-size .5s;
}
.HOME {
  font-size: 17px;
  font-family: "Lato";
  color: rgb( 51, 51, 51 );
  text-align: center;
  -moz-transform: scale(0.91, 0.9);
  -webkit-transform: scale(0.91, 0.9);
  -ms-transform: scale(0.91, 0.9);
  top: 40px;
  z-index: 74;
  height: 60px;
  position:absolute;
  -webkit-transition: top .5s;
    -webkit-transition: font-size .5s;
}
.HOME.small {
  font-size: 14px;
  font-family: "Lato";
  color: rgb( 51, 51, 51 );
  text-align: center;
  -moz-transform: scale(0.91, 0.9);
  -webkit-transform: scale(0.91, 0.9);
  -ms-transform: scale(0.91, 0.9);
  top: 20px;
  z-index: 74;
  height: 60px;
  position:absolute;
  -webkit-transition: top .5s;
      -webkit-transition: font-size .5s;
}
.Logo.small:hover {
    background: url("images/Logo.png") no-repeat;
    background-size: contain;
    position: absolute;
    top: 8px;
    width: 40px;
    height: 40px;
    z-index: 73;
    -webkit-transition: background-image .5s;
          -webkit-transition: height 0.6s;
    -moz-transition: height 0.6s;
    transition: height 0.6s;
          -webkit-transition: width 0.6s;
    -moz-transition: width 0.6s;
    transition: width 0.6s;
}
.Logo:hover {
  background: url("images/LogoHover.png") no-repeat;
  background-size: contain;
  position: absolute;
  top: 8px;
  width: 81px;
  height: 85px;
  z-index: 70;
  -webkit-transition: background-image .5s;
}
.Logo {
    background: url("images/Logo.png") no-repeat;
    background-size: contain;
    position: absolute;
    top: 8px;
    width: 81px;
    height: 85px;
    z-index: 73;
    -webkit-transition: background-image .5s;
    -webkit-transition: width .5s;
    -webkit-transition: height .5s;
}
.Logo.small {
    background: url("images/Logo.png") no-repeat;
    background-size: contain;
    position: absolute;
    top: 8px;
    width: 40px;
    height: 40px;
    z-index: 73;
    -webkit-transition: background-image .5s;
    -webkit-transition: width .5s;
    -webkit-transition: height .5s;
}
.middle-nav {
  width: 750px;
  margin-left: auto;
  margin-right: auto;
}

/*SUB-MENUS */

.sub-menu-style {
  width:200px;
  background-color: #ffffff;
  border-bottom: 1px solid #ebebeb;
  -webkit-transition: background-color .3s;
}
.sub-menu-style.small {
  width:160px;
  background-color: #ffffff;
  border-bottom: 1px solid #ebebeb;
  -webkit-transition: background-color .3s;
  border-left: 1px solid #ebebeb;
  border-right: 1px solid #ebebeb;
}
.sub-menu-style.small:hover {
  width:170px;
  background-color: #f5f5f5;
  border-bottom: 1px solid #ebebeb;
  -webkit-transition: background-color .3s;
  border-left: 1px solid #ebebeb;
  border-right: 1px solid #ebebeb;
}
  .sub-menu-style:hover {
  width:200px;
  background-color: #f5f5f5;
  border-bottom: 1px solid #ebebeb;
  -webkit-transition: background-color .3s;
  }
  .creator-sub {
  margin-left: 706px;
  margin-top: 130px;
  }

  .sub-menu {
  text-decoration: none;
   }

/*Initialize*/
ul#menu, ul#menu ul.sub-menu {
    padding:0;
    margin: 0;
}
ul#menu li, ul#menu ul.sub-menu li {
    list-style-type: none;
    display: inline-block;
    text-align: center;
}
/*Link Appearance*/
ul#menu li a, ul#menu li ul.sub-menu li a {
  font-size: 16px;
  font-family: "Lato";
  color: rgb( 51, 51, 51 );
  text-align: center;
  -moz-transform: scale(0.91, 0.9);
  -webkit-transform: scale(0.91, 0.9);
  -ms-transform: scale(0.91, 0.9);
}
ul#menu li a, ul#menu li ul.sub-menu li a.small{
  font-size: 14px;
  font-family: "Lato";
  color: rgb( 51, 51, 51 );
  text-align: center;
  -moz-transform: scale(0.91, 0.9);
  -webkit-transform: scale(0.91, 0.9);
  -ms-transform: scale(0.91, 0.9);
}
.cnav {
    margin-left:40px !important; }
.vnav {
    margin-left:155px !important; }
.Xnav {
    margin-left:270px !important; }
.anav {
    margin-left:385px !important; }


}
/*Make the parent of sub-menu relative*/
ul#menu li {
    position: relative;
}
/*sub menu*/
ul#menu li ul.sub-menu {
    display:none;
    position: absolute;
    top: 30px;
    left: 0;
    width: 200px;
        -webkit-transition: display .5s;
  margin-top: 70px;
  position: relative;
}
ul#menu li ul.sub-menu.small{
    display:none;
    position: absolute;
    top: 30px;
    left: 0;
    width: 200px;
        -webkit-transition: display .5s;
      margin-left: 30px; 
  margin-top: 30px;
  position: relative;
}
ul#menu li:hover ul.sub-menu {
    display:block;
    -webkit-transition: display .5s;
}

由于

Answer 1

您使用margin-left来定位.VERTICALS或.CREATORS等元素。这些元素是绝对定位的，但您尚未设置其left属性。因此，当其他元素触发重排时，它会根据margin-left重新定位。

您可以使用left属性而不是margin-left来解决此问题。

一个好的经验法则是，如果您要使用绝对定位的元素，那么您应该至少声明以下两个属性：top，left，bottom ，right。