使用css在其中水平扩展内容的div上的垂直闪烁

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

它闪烁的原因是因为一旦悬停，它会向下移动导航栏...原因是因为它的宽度增加了，并且由于图片而变得比可用空间更宽...所以它去了在另一行...通过使用浏览器调试器并打开和关闭悬停来查看它的实际效果。或者使用这个和你的一样的sn-p，加上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>