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类，你可以看到。

＆＃13;

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;