SOURCE

$(document).ready(function() {
  $('.dropdown').hover(function() {
    $(this).children('.sub-menu').slideDown(200);
  },
  function() {
    $(this).children('.sub-menu').slideUp(200);
  });
});

<div id="wrapper">
  <nav>
    <ul class="content clearfix">
      <li>
        <a href="#">
          Nav 1
        </a>
      </li>
      <li>
        <a href="#">
          Nav 2
        </a>
      </li>
      <li class="dropdown">
        <a href="#">
          Nav 3
        </a>
        <ul class="sub-menu">
          <li>
            <a href="#">
              Nav 3.1
            </a>
          </li>
          <li>
            <a href="#">
              Nav 3.2
            </a>
          </li>
          <li>
            <a href="#">
              Nav 3.3
            </a>
          </li>
          <li class="dropdown">
            <a href="#">
              Nav 3.4
            </a>
            <ul class="sub-menu">
              <li>
                <a href="#">
                  Nav 3.4.1
                </a>
              </li>
              <li class="dropdown">
                <a href="#">
                  Nav 3.4.2
                </a>
                <ul class="sub-menu">
                  <li>
                    <a href="#">
                      Nav 3.4.2.1
                    </a>
                  </li>
                  <li>
                    <a href="#">
                      Nav 3.4.2.2
                    </a>
                  </li>
                  <li>
                    <a href="#">
                      Nav 3.4.2.3
                    </a>
                  </li>
                  <li>
                    <a href="#">
                      Nav 3.4.2.4
                    </a>
                  </li>
                  <li>
                    <a href="#">
                      Nav 3.4.2.5
                    </a>
                  </li>
                </ul>
              </li>
              <li>
                <a href="#">
                  Nav 3.4.3
                </a>
              </li>
              <li>
                <a href="#">
                  Nav 3.4.4
                </a>
              </li>
              <li>
                <a href="#">
                  Nav 3.4.5
                </a>
              </li>
            </ul>
          </li>
          <li>
            <a href="#">
              Nav 3.5
            </a>
          </li>
        </ul>
      </li>
      <li>
        <a href="#">
          Nav 4
        </a>
      </li>
      <li>
        <a href="#">
          Nav 5
        </a>
      </li>
    </ul>
  </nav>
</div>

nav {
  background-color: rgba(69,157,245,1);   //背景颜色
  padding: 10px 0;
}

nav ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
}

/* 一级菜单的样式 */
nav ul li {
  display: inline-block;
  position: relative;
}

/* 子下拉菜单的样式 */
nav li ul {
  background-color: blueviolet;
  position: absolute;
  left: 0;
  top: 40px;
  width: 200px;
}

/* 子下拉菜单的子元素的样式 */
nav li li {
  position: relative;
  margin: 0px;
  display: block;
}

/* 二级下拉菜单的样式 */
nav li li ul {
  position: absolute;
  top: 0;
  left: 200px;
  margin: 0;
}

/* a标签的样式 */
nav a {
  line-height: 40px;
  padding: 0 12px;
  margin: 0 12px;
  color: #fff;
  text-decoration: none;
  display: block;
}

/* 移动或者点击后的颜色 */
nav a:hover,
nav a:focus,
nav a:active {
  color: black;
}

/* 每个下拉子菜单的每一个元素的样式 */
nav li li a {
  border-bottom: solid 3px rgb(100, 10, 50);
  margin: 0 10px;
  padding: 0;
}

/* 每个下拉子菜单的最后一个元素的下边框 */
nav li li:last-child a {
 border-bottom: 5px solid red;
}

/* 下拉菜单先隐藏 */
ul.sub-menu {
  display: none;
}

/* 一级菜单箭头往下 */
nav li.dropdown > a { 
  background-image: url('http://oruqgyu8f.bkt.clouddn.com/arrow-down.png');
  background-position: right 20px;
  background-repeat: no-repeat;
}

/* 其它菜单箭头往右 */
nav li li.dropdown > a {
  background-image: url('http://oruqgyu8f.bkt.clouddn.com/arrow-right.png');
  background-position: right 16px;
  background-repeat: no-repeat;
}