<div class="nav">

  <ul>

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

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

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

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

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

  </ul>

</div>

.nav {

  //导航栏高度

  height: 40px;

  //导航栏宽度

  width: 420px;

  //导航栏角度

  border-radius: 5px;

  //导航栏阴影

  box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.3);

  ul {

    li {

      //显示方式：inline行内但不能设置大小

      display: inline;

      //取消list前边的点

      list-style: none;

      a {

        //显示方式inline-block一行显示并可设置大小

        display: inline-block;

        //链接高度

        height: 40px;

        //链接宽度

        width: 60px;

        //文字对齐方式：居中

        text-align: center;

        //取消链接下划线

        text-decoration: none;

        //文字颜色

        color: #333;

        //行高度加上可设置文字上下居中对齐

        line-height: 40px;

        //过渡效果，这样鼠标移动上后颜色变换没那么生硬

        transition: background-color linear 0.2s;

        //鼠标移动上去以后的效果

        &:hover {

          //背景颜色

          background-color: royalblue;

          //文字颜色

          color: #fff;

        }

      }

    }

  }

}