<nav>
<div>
<a href="#">点</a>
<a href="#">滴</a>
<a href="#">一</a>
<a href="#">生</a>
</div>
</nav>
<body>
<style>
body {
margin: 0/*一定的初始化是必要的*/
}
nav {
position: fixed/*因为是一个全页面的竖排导航，所以必须设置为固定定位*/
/*同时因为固定定位是把标签从文档中直接拿出来，所以布局其他元素时要用margin留出外边距，
必要时可以设置导航栏为固定宽度保证不会出现白边*/
background-color: #2f2f2f
height: 100%/*让导航栏与页面同高*/
top: 0left: 0/*设置了固定定位后这两个属性才起作用*/
}
nav a { /*设置每个a标记的display属性为block，这样方便控制每个a标记的样式*/
font-weight: bold
font-size: 18px
color: #ffffff
display: block
padding: 15px
text-decoration: none
}
nav div a:first-child { /*通过伪类来控制活动页面的a标记的样式，作为静态页面每个页面都要写不同的css控制样式，
所以使用不方便的话可以使用class来控制样式*/
box-shadow: -1px 0.5px 4px 1px #777 inset
background-color: #e58c7c
}
nav div a:hover {
background-color: #e58c7c
}
nav div a:active {
box-shadow: -1px 0.5px 4px 1px #777 inset
background-color: #e58c7c
}
</style>
#navmenu2{width:150px
text-align:center
float:left
}
#navmenu2 ul{
padding:0px
margin:0px
list-style:none
}
#navmenu2 li{
margin:0px
}
#navmenu2 a{
display:block
text-decoration:none
width:120px
border:1px
border-right:10px
border-left:20px
border-color:#60C
border-style:solid
background-color:#00F
color:#FFF
padding:7px 0px 7px 0px
}
#navmenu2 a:hover {
background-color:#000
color:#09F
border-left-color:#09f
border-right-color:#09f
border-top-color:#60c
border-bottom-color:#60c
}
这是我拿网络上的一个纯CSS菜单样式修改的竖排样式，你可以拿去参考和再次修改。
希望能帮到你。
下面是效果图，左侧是未展开的，右侧是展开的效果。
