html - :before 上的图像 CSS 转换

Question

如您所见，将鼠标悬停在“关于”链接上，一个子导航似乎从左侧飞出。在那个子导航的另一边(与子导航链接相对)我想要一个图像(http://placehold.it/30x100)从右边飞出(过渡)。到目前为止，我尝试过的一切都不起作用。

http://codepen.io/matthewmorrisux/pen/wMMpzE

<div class="container">
  <nav class="menu">
    <img src="http://placehold.it/240x60" alt="" class="menu__img" />
    <ul>
      <li class="menu__item">
        <a href="">About</a>
        <ul class="sub-menu">
          <div class="sub-menu__items">
            <li class="sub-menu__item"><a href="">item 1</a></li>
            <li class="sub-menu__item"><a href="">item 2</a></li>
            <li class="sub-menu__item"><a href="">item 3</a></li>
            <li class="sub-menu__item"><a href="">item 4</a></li>
          </div>
         </ul>
      </li>
      <li class="menu__item"><a href="">Process</a></li>
      <li class="menu__item"><a href="">Contact</a></li>
    </ul>
  </nav>
</div>



.container {
  position: relative;
}

ul, li, a {
  margin: 0;
  padding: 0;
  list-style: none;
  text-decoration: none;
}

.menu {
  position: relative;
  width: 100%;
  max-width: 960px;
  height: 100px;
  padding: 20px;
  margin: 0 auto;
}

.menu img {
  position: relative;
  float: left;
  /* left: 10%; */
}

.menu ul {
  text-align: center;
}


.menu__item {
  position: relative;
  display: inline-block;
  padding: 20px 40px;
}

.sub-menu {
  position: absolute;
  display: block;
  height: 0;
  overflow: hidden;
  transition: height .5s ease 1s;
}

.menu__item:hover .sub-menu {
  display: block;
  height: 100px;
  transition: height .5s ease 0s;
}

.sub-menu:before {
  content: '';
  display: block;
  position: absolute;
  width: 2px;
  height: 0px;
  background: black;
  transition: height .2s ease .5s;
}

.menu__item:hover .sub-menu:before {
  content: '';
  display: block;
  position: absolute;
  width: 2px;
  height: 100%;
  background: black;
  transition: height .3s ease 0s;
}

.sub-menu__items {
  position: relative;
  left: -110px;
  transition: left .2s ease .3s;
  padding-left: 10px;
  font: 700 16px/21px arial;
}

.menu__item:hover .sub-menu__items {
    left: 0px;
    transition: left .2s ease .4s;
}

.sub-menu__item {
  position: relative;
  padding-top: 5px;
  left: -100px;
  transition: left .2s ease .4s;
}

.menu__item:hover .sub-menu__item:nth-of-type(1) {
  left: 0px;
  transition: left .2s ease 0s;
}

.menu__item:hover .sub-menu__item:nth-of-type(2) {
  left: 0px;
  transition: left .2s ease 500ms;
}

.menu__item:hover .sub-menu__item:nth-of-type(3) {
  left: 0px;
  transition: left .2s ease 600ms;
}

.menu__item:hover .sub-menu__item:nth-of-type(4) {
  left: 0px;
  transition: left .2s ease 700ms;
}

Answer 1

更新:我相信您遇到的问题是由于隐藏的溢出造成的。我进行了一些调整，我认为现在的结果非常接近您的要求。

See here

*,
*::before,
*::after {
  box-sizing: border-box;
}

body {
  position: relative;
  font: bold 18px/21px arial;
}

.container {
  position: relative;
}

ul, li, a {
  margin: 0;
  padding: 0;
  list-style: none;
  text-decoration: none;
}

.menu {
  position: relative;
  width: 100%;
  max-width: 960px;
  height: 100px;
  padding: 20px;
  margin: 0 auto;
}

.menu img {
  position: relative;
  float: left;
  /* left: 10%; */
}

.menu ul {
  text-align: center;
}


.menu__item {
  position: relative;
  display: inline-block;
  padding: 20px 40px;
}

.sub-menu {
  position: absolute;
  display: block;
  height: 0;
  transition: height .5s ease 1s;
}

.menu__item:hover .sub-menu {
  display: block;
  height: 100px;
  transition: height .5s ease 0s;
}


.sub-menu:before {
  content: '';
  display: block;
  position: absolute;
  width: 2px;
  height: 0px;
  background: black;
  transition: height .2s ease .5s;
}

.menu__item:hover .sub-menu:before {
  content: '';
  display: block;
  position: absolute;
  width: 2px;
  height: 100%;
  background: black;
  transition: height .3s ease 0s;
}

.sub-menu__items {
  position: relative;
  left: 0;
  transition: left .2s ease .3s;
  padding-left: 10px;
  font: 700 16px/21px arial;
}

.sub-menu__items:before {
  content:'';
  width:0;
  height:100px;
  background: url('http://placehold.it/30x100');
  position:absolute;
  top:0;
  right:100%;
  margin-left:-30px;
  display: block;
  transition: width 0.3s ease;
}
.menu__item:hover .sub-menu__items:before {
  width: 30px;
}
.menu__item:hover .sub-menu__items {
    left: 0px;
    transition: left .2s ease .4s;
}

.sub-menu__item {
  position: relative;
  padding-top: 5px;
  opacity: 0;
  transition: opacity .2s ease .4s;
}

.menu__item:hover .sub-menu__item:nth-of-type(1) {
  opacity: 1;
  transition: opacity .2s ease 200ms;
}

.menu__item:hover .sub-menu__item:nth-of-type(2) {
  opacity: 1;
  transition: opacity .2s ease 500ms;
}

.menu__item:hover .sub-menu__item:nth-of-type(3) {
 opacity: 1;
  transition: opacity  .2s ease 600ms;
}

.menu__item:hover .sub-menu__item:nth-of-type(4) {
  opacity: 1;
  transition: opacity  .2s ease 700ms;
}

<div class="container">
  <nav class="menu">
    <img src="http://placehold.it/240x60" alt="" class="menu__img" />
    <ul>
      <li class="menu__item">
        <a href="">About</a>
        <ul class="sub-menu">
          <div class="sub-menu__items">
            <li class="sub-menu__item"><a href="">item 1</a></li>
            <li class="sub-menu__item"><a href="">item 2</a></li>
            <li class="sub-menu__item"><a href="">item 3</a></li>
            <li class="sub-menu__item"><a href="">item 4</a></li>
          </div>
         </ul>
      </li>
      <li class="menu__item"><a href="">Process</a></li>
      <li class="menu__item"><a href="">Contact</a></li>
    </ul>
  </nav>
</div>