导航栏

  <nav>  
    <ul class="clearfix">
      <li><a href="#">首页</a></li>
      <li><a href="#">作品</a></li>
      <li>
        <a href="#">更多</a>
        <ul class="child">
          <li><a href="">GitHub</a></li>
          <li><a href="">博客</a></li>
          <li><a href="">知乎</a></li>
        </ul>
      </li>
    </ul>
  </nav>

*{margin: 0;padding: 0;}
ul,ol{list-style: none;}
a{text-decoration: none;color: #333;}
.clearfix::after{
  content: '';
  display: block;
  clear: both;
}

nav{
  width: 500px;
  margin: 10px auto 0;
  box-shadow: 0px 2px 4px 1px rgba(0,0,0,0.3);
}

nav>ul>li{
  position: relative;
  float: left;
}
nav a{
  display: block;
  /*a链接是行内元素，加padding高度不变，所以加block或者inline-block*/
  padding: 10px 20px;
  min-width: 50px;
  text-align: center;
  background-color: pink; 
}
nav a:hover{
  color: #fff;
  background: rgba(0,0,0,0.4);
}
nav .child{
  position: absolute;
  top: 100%;
  box-shadow: 0px 2px 4px 1px rgba(0,0,0,0.3);
  display: none;
}
/*鼠标放上去时出现二级菜单*/
nav>ul>li:hover .child{
  display: block;
}

效果预览