效果如图:
代码如下：
index.html
css垂直菜单栏
First
Second
Third
Fourth
index.css
body {
line-height:1;
font-size:13px;
font-family:Arial, Helvetica, sans-serif;
}
p, .tab-content li, h1, h2, h3{
margin-bottom: 10px;
}
.tab-container h3{
font-size:147%;
}
#container{
margin: 0 auto;
margin-top: 4%;
}
.tab-container {
position: relative;
width: 100%;
z-index: 0;
}
.tab-container > div {
}
.tab-container > div > a {
position: relative !important;
display: inline-block;
font-size: 15px;
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
font-weight: bold;
text-transform: uppercase;
margin: 1px;
background: #ddd;
padding: 20px 55px;
-moz-border-radius: 3px;
-webkit-border-radius: 0px;
border-radius: 3px;
-moz-box-shadow: 0 4px 10px -5px #000000;
box-shadow: 0 4px 10px -5px #000000;
-webkit-box-shadow: 0 4px 10px -5px #000000;
width: 50px;
height: 10px;
text-decoration: none;
}
.tab-container > div:not(:target) > a {
}
.tab-container > div:target > a {
background: none repeat scroll 0 0 #948a81;
text-shadow: 0 1px 0 #4C4648;
}
.tab-container > div > div {
background: #ddd;
top: 0;
padding: 20px;
min-height: 250px;
position: absolute;
left: 180px;
width: 400px;
}
.tab-container > div:target > div {
position: absolute;
z-index: 3 !important;
}
