纵向菜单效果图

菜单栏_布局

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title></title>
  </head>
  <link rel="stylesheet" href="css/zujian.css" />
  <body>
    <nav class="list1">
      <ul>
        <li><a href="#">shift</a></li>
<span style="white-space:pre">        </span><li><a href="#">color</a></li><span style="white-space:pre"> </span>
<span style="white-space:pre">        </span><li><a href="#">apple</a></li><span style="white-space:pre"> </span>
<span style="white-space:pre">        </span><li><a href="#">orange</a></li><span style="white-space:pre">  </span>
<span style="white-space:pre">        </span><li><a href="#">prosecute</a></li>         
      </ul>     
    </nav>    
  </body>
</html>


css 

*{
  margin: 0;
  padding: 0;
}

nav{
  margin: 50px;
  width : 150px;
}

.list1 ul{
  border: 1px solid #f00;
  border-radius: 3px;
  padding: 5px 10px 3px;
}

.list1 li{
  list-style-type: none;
  padding: 3px 10px;
}
/*非首位子元素 选择符*/
.list1 li+li{
  border-top: 1px solid #f00;
}

/*为链接添加样式*/
.list1 a{
  text-decoration: none;
  font: 20px;
  font-weight: 400;
  color:#000;
  background: #ffed53;
}
.list1 a:hover{
  color: #069;
}


横向菜单效果图

菜单栏_布局_02

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title></title>
    <link rel="stylesheet" href="css/heng.css" />
  </head>
  <body>
    <nav class="list1">
      <ul>
        <li><a href="#">HTML</a></li>
        <li><a href="#">CSS</a></li>
        <li><a href="#">JAVA</a></li>
        <li><a href="#">PHP</a></li>
      </ul>
    </nav>    
  </body>
</html>


.list1 ul{
  overflow:hidden;
}

.list1 li{
  float:left;
  list-style-type: none;
}

.list1 a{
  display: block;
  padding: 0 16px;
  text-decoration: none;
  color: #999;
}

.list1 li + li a{
  border-left: 1px solid #aaa;  
}
/*li + li a  除第一个链接之外的每个链接左侧都加一条竖线*/

.list1 a:hover{
  color: #555;
}