css垂直菜单栏

效果如图:

代码如下：

index.html

css垂直菜单栏

First

First

Second

Second

Third

Third

Fourth

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;

}