我遇到了一个问题，当我将网站的宽度重新调整到部分看到子菜单时，它会移动我整个网站的内容。图片：http://puu.sh/iYF4N.png
似乎它可以正常使用firefox，但不能使用chrome。
nav的Style.css：
.theNavigationBar {
position: absolute;
width: 100%;
top: 15px;
left: 0;
text-align: center;
font-weight: bold;
}
.main-navigation{clear:both;display:block;font-size:17px;text-transform:uppercase;}
.main-navigation ul {
list-style: none;
margin: 0;
display: inline;
background: #000;
padding: 5px;
border-radius: 28px;
padding-left: 10px;
padding-right: 10px;
}
.main-navigation ul li{position:relative;margin:0 auto;display:inline-block;}
.main-navigation ul:not(.sub-menu) > li{-webkit-transition:top .3s ease-in-out, opacity .3s ease-in-out;transition:top .3s ease-in-out, opacity .3s ease-in-out;}
.main-navigation li a:not(:last-child):after{content:"\f107";font-family:FontAwesome;margin:0 0 0 0px;}
.main-navigation ul ul li a:not(:last-child):after{content:"\f104";margin:2px 0 0 0px;float:left;}
.main-navigation a{display:block;text-decoration:none;padding:0.5em;border-top:2px solid transparent;-o-transition:border-top .3s ease-in-out;-moz-transition:border-top .3s ease-in-out;-webkit-transition:border-top .3s ease-in-out;transition:border-top .3s ease-in-out;}
.main-navigation ul ul{float:left;position:absolute;//top:62px;left:auto;z-index:99999;visibility:hidden;opacity:0;background:rgba(0,0,0, 0.79);text-transform:none;text-align:center;transition:visibility 0s linear 0.2s,opacity 0.2s linear, transform 0.2s linear;-webkit-transform:translate3d(0,20px,0);transform:translate3d(0,20px,0);}
.main-navigation ul ul ul{right:100%;top:0;visibility:hidden;opacity:0;transition:visibility 0s linear 0.2s,opacity 0.2s linear, transform 0.2s linear;-webkit-transform:translate3d(20px,0,0);transform:translate3d(20px,0,0);border-radius: 15px;}
.main-navigation ul ul a{width:260px;padding:0.2em 0.8em;}
.main-navigation ul ul li{}
.main-navigation li:hover > a{}
.main-navigation ul ul:hover > a{}
.main-navigation ul ul a:hover{color:#ffffff;}
.main-navigation ul li:hover > ul, .main-navigation ul li:focus > ul, .main-navigation ul li:active > ul, .main-navigation ul li.focus > ul{visibility:visible;opacity:1;transition-delay:0s;-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0);}
.main-navigation ul ul li:hover > ul, .main-navigation ul ul li:focus > ul, .main-navigation ul ul li:active > ul, .main-navigation ul ul li.focus > ul{visibility:visible;opacity:1;transition-delay:0s;-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}
.main-navigation ul li:hover > a,
.main-navigation ul li.focus > a,
.main-navigation li.current-menu-item > a,
.main-navigation li.current-menu-parent > a,
.main-navigation li.current-page-ancestor > a,
.main-navigation .current_page_item > a,
.main-navigation .current_page_parent > a{border-top:2px solid rgba(245, 247, 245, 0.69);}
.menu-toggle{display:none;}
@media screen and (max-width:768px){.menu-toggle,
.main-navigation.toggled .nav-menu{display:block;background:#ffffff;}
.main-navigation{text-transform:inherit;}
.theNavigationBar{top:0;padding:0;z-index:99;}
.menu-toggle{width:100%;padding:1em;text-align:left;color:#6c6c6c;border-radius:0;font-size:14px;line-height:1.8;}
.menu-toggle i{float:right;}
.menu-toggle:hover, .menu-toggle:focus{background:#ffffff;color:#6c6c6c;}
.main-navigation.toggled .menu-toggle{background:#cea525;color:#ffffff;}
.main-navigation ul{display:none;}
.main-navigation ul li{display:block;}
.main-navigation ul ul li a:not(:last-child):after{content:"\f107";margin:0 0 0 10px;float:none;}
.main-navigation ul ul, .main-navigation ul ul ul{float:none;position:relative;top:0;left:0;visibility:visible;opacity:1;display:block;-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0);padding-left:5%;z-index:9;background:none !important;}
.main-navigation a{border-bottom:1px solid rgba(0,0,0,.05);text-align:left;color:#6c6c6c !important;padding:10px;}
.main-navigation ul ul a{width:100%;}
.openSearch{display:inline;position:relative !important;top:inherit !important;right:inherit !important;left:inherit !important;font-size:100% !important;width:auto !important;height:auto !important;line-height:inherit !important;margin:0 8px;}
}
.site-main .comment-navigation,
.site-main .posts-navigation,
.site-main .post-navigation,
.site-main .pagination {
margin: 0 -4em 1.5em;
background: rgba(0,0,0,0.03);
overflow: hidden;
-webkit-border-radius: 2px;
-moz-border-radius: 2px;
border-radius: 2px;
font-weight: 400;
}
.site-main .pagination .nav-links {
padding: 1.5em;
text-align: center;
}
.site-main .pagination .nav-links > span, .page-links > span.page-links-number {
display: inline-block;
background: #cecece;
-webkit-border-radius: 2px;
-moz-border-radius: 2px;
border-radius: 2px;
line-height: 1;
padding: 0.5em 0.8em;
margin: 1px 0;
}
.comment-navigation .nav-previous,
.posts-navigation .nav-previous,
.post-navigation .nav-previous {
float: left;
width: 50%;
}
.comment-navigation .nav-next,
.posts-navigation .nav-next,
.post-navigation .nav-next {
float: right;
text-align: right;
width: 50%;
}
.post-navigation .nav-previous,
.post-navigation .nav-next,
.posts-navigation .nav-previous,
.posts-navigation .nav-next,
.comment-navigation .nav-previous,
.comment-navigation .nav-next {
padding: 1.5em;
}
.posts-navigation .nav-previous a,
.posts-navigation .nav-next a,
.comment-navigation .nav-previous a,
.comment-navigation .nav-next a {
text-transform: uppercase;
letter-spacing: -1px;
}
.post-navigation .nav-next {
border-left: 1px solid rgba(0,0,0,0.05);
}
.post-navigation .meta-nav {
display: inline-block;
width: 90%;
text-transform: uppercase;
letter-spacing: -1px;
}
.post-navigation .nav-previous .meta-nav {
padding-left: 10px;
}
.post-navigation .nav-next .meta-nav {
padding-right: 10px;
}
我尝试添加position: absolute或不同z-index，但没有帮助。
<div class="theNavigationBar">
<nav id="site-navigation" class="main-navigation" role="navigation">
<button class="menu-toggle" aria-controls="primary-menu" aria-expanded="false"><?php _e( 'Main Menu', 'fortunatopro' ); ?><i class="fa fa-bars"></i></button>
<?php wp_nav_menu( array( 'theme_location' => 'primary', 'menu_id' => 'primary-menu' ) ); ?>
</nav><!-- #site-navigation -->
</div>