Page Widget How to - Hove to show vertical menu

Question

We would like to know how to hove to show vertical menu.
Answer


<!DOCTYPE html>
<html>
<head>
<style type='text/css'>
nav ul li.nav-about {<!--  ww w . j  a v  a  2  s.  co m-->
    background: #ddd;
    cursor: pointer;
    height: 100%;
    left: 0;
    margin: 0;
    padding: 0;
    position: absolute;
    -webkit-transition: all 1s ease-in-out;
    -moz-transition: all 1s ease-in;
    -o-transition: all 1s ease-in;
    -ms-transition: all 1s ease-in;
    transition: all 1s ease-in;
    width: 110px;
}
nav ul li.nav-about:hover {
    background: #66d;
    cursor: pointer;
    left: 0;
    -webkit-transition: all 1s ease-in-out;
    -moz-transition: all 1s ease-in;
    -o-transition: all 1s ease-in;
    -ms-transition: all 1s ease-in;
    transition: all 1s ease-in;
}
#logo {
    background: #d66;
    height: 100px;
    left: 110px;
    opacity: 0;
    position: absolute;
    -webkit-transition: all 1s ease-in-out;
    -moz-transition: all 1s ease-in;
    -o-transition: all 1s ease-in;
    -ms-transition: all 1s ease-in;
    transition: all 1s ease-in;
    width: 300px;
}
nav ul li.nav-about:hover #logo {
    opacity: 100;
    -webkit-transition: all 1s ease-in-out;
    -moz-transition: all 1s ease-in;
    -o-transition: all 1s ease-in;
    -ms-transition: all 1s ease-in;
    transition: all 1s ease-in;
}
nav ul li.nav-about:hover #logo div:nth-child(2) {
    -webkit-animation-name: your_custom_animation;
    -webkit-animation-duration: 2s;
    -webkit-animation-iteration-count: 4;
    -webkit-animation-direction: alternate;
    -webkit-animation-timing-function: ease-in;
    -moz-animation-name: your_custom_animation;
    -moz-animation-duration: 2s;
    -moz-animation-iteration-count: 4;
    -moz-animation-direction: alternate;
    -moz-animation-timing-function: ease-in;
    -ms-animation-name: your_custom_animation;
    -ms-animation-duration: 2s;
    -ms-animation-iteration-count: 4;
    -ms-animation-direction: alternate;
    -ms-animation-timing-function: ease-in;
}
@-webkit-keyframes your_custom_animation {
    0% {
        background: #d66;
    }
    100% {
        background: #6d6;
    }
}
@-moz-keyframes your_custom_animation {
    0% {
        background: #d66;
    }
    100% {
        background: #6d6;
    }
}
@-ms-keyframes your_custom_animation {
    0% {
        background: #d66;
    }
    100% {
        background: #6d6;
    }
}
</style>
</head>
<body>
  <nav>
    <ul>
      <li class="nav-about">Hover Element
        <div id="logo">
          <div>A</div>
          <div>B</div>
          <div>C</div>
        </div>
      </li>
    </ul>
  </nav>
</body>
</html>
The code above is rendered as follows: