Untitled

<ul id="asa">

  <li><a href="#">Home</a></li>

  <li><a href="#">Video</a>

    <ul>

      <li><a href="#">Html</a>

        <ul>

          <li><a href="#">Html01</a></li>

          <li><a href="#">Html02</a>

            <ul>

              <li><a href="#">asa1</a></li>

              <li><a href="#">asa2</a></li>

              <li><a href="#">asa3</a></li>

            </ul>

          </li>

          <li><a href="#">Html03</a></li>

        </ul>

      </li>

      <li><a href="#">Css</a></li>

      <li><a href="#">Php</a></li>

    </ul>

  </li>

  <li><a href="#">Setting</a>

    <ul>

      <li><a href="#">MY Setting</a></li>

      <li><a href="#">We Setting</a></li>

      <li><a href="#">You Setting</a></li>

      <li><a href="#">Your Setting</a>

        <ul>

          <li><a href="#">Messanger</a></li>

          <li><a href="#">Frinds</a></li>

          <li><a href="#">Black list</a></li>

          <li><a href="#">Hover</a></li>

        </ul>

      </li>

    </ul>

  </li>

  <li><a href="#">Contact Us</a></li>

</ul>

* {

  padding: 0;

  margin: 0;

}

#asa {

  margin: 40px;

  background:#bbb;

  width:680px;

  height:40px;

  border-radius:2em;

}

ul ul {

  display:none;

  position: absolute;

  top:100%;

}

ul li:hover > ul {

  display:block;

}

li {

  float:left;

  list-style:none;

  position:relative;

  background: #bbb;

}

a{

  color:black;

  text-decoration:none;

  width:140px;

  display:block;

  padding:10px 15px;

  text-align:center;

}

a:hover {

  background:black;

  color:#bbb;

}

ul li ul li  {

  float:none;

}

ul li ul li ul {

  top: 0;

  left: 100%;

  position:absolute;

}