вертикальное мерцание на div, которое расширяется горизонтально с контентом в нем, используя css

Question

Эй, все это :) Я ослеплю проблему, которая развивается вокруг небольшого эффекта мерцания, который возникает, когда я нахожу свой пункт меню «Дизайн». Он должен показывать контент только по горизонтали.

Если бы кто-нибудь мог указать что-то в моем коде или дать некоторые советы/помощь по моей проблеме, я был бы действительно счастлив! Интернет Пример: http://instagib.dk/westring-kbh/#

.header { 
 
    width: 100%; 
 
    max-width: 1280px; 
 
    height: 70px; 
 
    margin: 0 auto; 
 
} 
 
.logo { 
 
    width: 70px; 
 
    height: 70px; 
 
    float: left; 
 
} 
 
/******* Menu ********/ 
 

 
.menu { 
 
    float: right; 
 
} 
 
.menu_item { 
 
    float: left; 
 
    position: relative; 
 
    width: 110px; 
 
} 
 
.menu_item a { 
 
    text-decoration: none; 
 
    display: block; 
 
    color: #fff; 
 
    width: 110px; 
 
    height: 70px; 
 
    text-align: center; 
 
    float: right; 
 
} 
 
.menu_item:hover { 
 
    width: 300px; 
 
} 
 
.menu_item:hover .menu_expand_item { 
 
    display: block; 
 
    float: left; 
 
    width: 40px; 
 
    height: 70px; 
 
} 
 
.menu_item .menu_expand_item { 
 
    display: none; 
 
} 
 
/******* Social share in menu ********/ 
 

 
.social_expand { 
 
    position: relative; 
 
    float: right; 
 
    width: 60px; 
 
    height: 70px; 
 
    right: 1px; 
 
    color: #fff; 
 
    border-left: 1px solid #303F4A; 
 
} 
 
.social_expand:hover { 
 
    width: 110px; 
 
} 
 
.social_share { 
 
    position: absolute; 
 
    color: #fff; 
 
    opacity: 0; 
 
    height: 70px; 
 
    line-height: 70px; 
 
    vertical-align: middle; 
 
} 
 
.social_expand:hover .social_share { 
 
    opacity: 1; 
 
    right: 18px; 
 
} 
 
.facebook { 
 
    background: url(../img/facebook_icon.png) no-repeat center center; 
 
} 
 
.twitter { 
 
    background: url(../img/twitter_icon.png) no-repeat center center; 
 
} 
 
/************ Header DRY declerations *********/ 
 

 
.header, 
 
.logo:hover { 
 
    background-color: #2A3238; 
 
} 
 
.logo, 
 
.social_expand:hover, 
 
.menu_item:hover { 
 
    background-color: #303F4B; 
 
} 
 
.twitter, 
 
.facebook { 
 
    float: left; 
 
    width: 60px; 
 
    height: 70px; 
 
} 
 
.menu_item, 
 
.menu_item:hover, 
 
.social_expand, 
 
.social_expand:hover { 
 
    -webkit-transition: width 0.1s, linear 0.1s; 
 
    -moz-transition: width 0.1s, linear 0.1s; 
 
    -ms-transition: width 0.1s, linear 0.1s; 
 
    -o-transition: width 0.1s, linear 0.1s; 
 
    transition: width 0.1s, linear 0.1s; 
 
}

<header class="header"> 
 
    <a href="#" class="logo"> 
 
    <img src="img/logo-icon.png" alt="Westring-kbh logo" width="70" height="70"> 
 
    </a> 
 

 
    <div class="social_expand"> 
 
    <div class="twitter"> 
 
     <p class="social_share">Del os</p> 
 
    </div> 
 
    </div> 
 
    <div class="social_expand"> 
 
    <div class="facebook"> 
 
     <p class="social_share">Del os</p> 
 
    </div> 
 
    </div> 
 
    <nav class="menu"> 
 
    <div class="menu_item"> 
 
     <a href="#">Design</a> 
 
     <a href="#" class="menu_expand_item">Dick</a> 
 
     <a href="#" class="menu_expand_item">Dick</a> 
 
     <a href="#" class="menu_expand_item">Dick</a> 
 
    </div> 
 
    <div class="menu_item"> 
 
     <a href="#">Websites</a> 
 
    </div> 
 
    <div class="menu_item"> 
 
     <a href="#">Seo</a> 
 
    </div> 
 
    <div class="menu_item"> 
 
     <a href="#">Kontakt</a> 
 
    </div> 
 
    </nav> 
 
</header>

Answer 1

Причина, по которой мерцает потому, что когда-то при наведении курсора мыши, он перемещается вниз навигационной панели ... Причина этого в том, что она затрачивает в ширину, и становится шире чем пространство, доступное из-за картины ... Так что это идет по другой линии ... Смотрите это в действии, используя отладчик браузера и включающий и выключая зависание. Или используйте этот фрагмент, который совпадает с вашим, с классом HOVER, чтобы вы могли видеть.

.header { 
 
    width: 100%; 
 
    max-width: 1280px; 
 
    height: 70px; 
 
    margin: 0 auto; 
 
} 
 
.logo { 
 
    width: 70px; 
 
    height: 70px; 
 
    float: left; 
 
} 
 
/******* Menu ********/ 
 

 
.menu { 
 
    float: right; 
 
} 
 
.menu_item { 
 
    float: left; 
 
    position: relative; 
 
    width: 110px; 
 
    border:1px solid black; 
 
} 
 
.menu_item a { 
 
    text-decoration: none; 
 
    display: block; 
 
    color: #fff; 
 
    width: 110px; 
 
    height: 70px; 
 
    text-align: center; 
 
    float: right; 
 
} 
 
.menu_item:hover,.menu_item.hover { 
 
    width: 300px; 
 
} 
 
.menu_item:hover .menu_expand_item ,.menu_item.hover .menu_expand_item { 
 
    display: block; 
 
    float: left; 
 
    width: 40px; 
 
    height: 70px; 
 
} 
 
.menu_item .menu_expand_item { 
 
    display: none; 
 
} 
 
/******* Social share in menu ********/ 
 

 
.social_expand { 
 
    position: relative; 
 
    float: right; 
 
    width: 60px; 
 
    height: 70px; 
 
    right: 1px; 
 
    color: #fff; 
 
    border-left: 1px solid #303F4A; 
 
} 
 
.social_expand:hover { 
 
    width: 110px; 
 
} 
 
.social_share { 
 
    position: absolute; 
 
    color: #fff; 
 
    opacity: 0; 
 
    height: 70px; 
 
    line-height: 70px; 
 
    vertical-align: middle; 
 
} 
 
.social_expand:hover .social_share { 
 
    opacity: 1; 
 
    right: 18px; 
 
} 
 
.facebook { 
 
    background: url(../img/facebook_icon.png) no-repeat center center; 
 
} 
 
.twitter { 
 
    background: url(../img/twitter_icon.png) no-repeat center center; 
 
} 
 
/************ Header DRY declerations *********/ 
 

 
.header, 
 
.logo:hover { 
 
    background-color: #2A3238; 
 
} 
 
.logo, 
 
.social_expand:hover, 
 
.menu_item:hover { 
 
    background-color: #303F4B; 
 
} 
 
.twitter, 
 
.facebook { 
 
    float: left; 
 
    width: 60px; 
 
    height: 70px; 
 
} 
 
.menu_item, 
 
.menu_item:hover, 
 
.menu_item.hover, 
 
.social_expand, 
 
.social_expand:hover { 
 
    -webkit-transition: width 0.1s, linear 0.1s; 
 
    -moz-transition: width 0.1s, linear 0.1s; 
 
    -ms-transition: width 0.1s, linear 0.1s; 
 
    -o-transition: width 0.1s, linear 0.1s; 
 
    transition: width 0.1s, linear 0.1s; 
 
}

<header class="header"> 
 
    <a href="#" class="logo"> 
 
    <img src="img/logo-icon.png" alt="Westring-kbh logo" width="70" height="70"> 
 
    </a> 
 

 
    <div class="social_expand"> 
 
    <div class="twitter"> 
 
     <p class="social_share">Del os</p> 
 
    </div> 
 
    </div> 
 
    <div class="social_expand"> 
 
    <div class="facebook"> 
 
     <p class="social_share">Del os</p> 
 
    </div> 
 
    </div> 
 
    <nav class="menu"> 
 
    <div class="menu_item hover"> 
 
     <a href="#">Design</a> 
 
     <a href="#" class="menu_expand_item">Dick</a> 
 
     <a href="#" class="menu_expand_item">Dick</a> 
 
     <a href="#" class="menu_expand_item">Dick</a> 
 
    </div> 
 
    <div class="menu_item"> 
 
     <a href="#">Websites</a> 
 
    </div> 
 
    <div class="menu_item"> 
 
     <a href="#">Seo</a> 
 
    </div> 
 
    <div class="menu_item"> 
 
     <a href="#">Kontakt</a> 
 
    </div> 
 
    </nav> 
 
</header>