css - 使用 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

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