复制代码代码如下:
-
AAAA- A1
- A2
- A3
- A4
- A5
- A6
-
BBBB- B1
- B2
- B3
- B4
- B5
- B6
-
CCCC- C1
- C2
- C3
- C4
- C5
- C6
-
DDDD- D1
- D2
- D3
- D4
- D5
- D6
-
EEEE- E1
- E2
- E3
- E4
- E5
- E6
-
FFFF- F1
- F2
- F3
- F4
- F5
- F6
-
GGGG- G1
- G2
- G3
- G4
- G5
- G6
下面是css文件
复制代码代码如下:
.navigator{
width: 100%;
margin: 0;
}
.navigator ul{
padding: 0;
margin: 0;
list-style-type: none;
}
.navigator li{
float: left;
position :relative;
}
.navigator ul li a,.navigator ul li a:visited {
display: block;
text-align: center;
text-decoration: none;
width: 184px;
height: 50px;
color: black;
border: 1px solid #fff;
border-width: 1px 1px 0 0;
background: #CCCCCC;
line-height: 50px;
font-size: 17px;
}
.navigator ul li:hover a {
color: #fff;
background: #CCCCFF;
}
.navigator ul li ul {
display: none;
}
.navigator ul li:hover ul {
display: block;
position: absolute;
top: 51px;
left: 0;
width: 185px;
}
.navigator ul li:hover ul li a {
display: block;
background: #CCFFFF;
color: #000;
}
.navigator ul li:hover ul li a:hover {
background: #dfc184;
color: #000;
}
把css文件和html文件放在一个目录下就可以看了，有不妥的地方还请指正
