六边形的菜单挺有意思，不过计算要准确，效果如下图：
代码如下：
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
2 <html xmlns="http://www.w3.org/1999/xhtml">
3 <head>
4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
5 <title>六边形菜单</title>
6 <style type="text/css">
7 * {
8 margin:0;
9 padding:0;
10 }
11 body {
12 font:13px/150% Georgia, "Times New Roman", Times, serif;
13 }
14 #hex {
15 width:313px;
16 margin:10px auto;
17 list-style:none;
18 }
19 #hex:after {
20 content:"";
21 height:0;
22 clear:both;
23 display:block;
24 visibility:hidden;
25 }
26 #hex li {
27 float:left;
28 margin-right:4px;
29 width:100px;
30 height:110px;
31 display:block;
32 text-align:center;
33 }
34 #hex li.p1 {
35 padding-left:52px;
36 }
37 #hex li.p2 {
38 margin-top:-27px;
39 }
40 #hex li a:link, #hex li a:visited {
41 text-decoration:none;
42 text-transform:uppercase;
43 color:#fff;
44 outline:none;
45 }
46 #hex li a b {
47 display:block;
48 height:0;
49 width:0;
50 overflow:hidden;
51 border-bottom:30px solid #000;
52 border-left:50px dotted transparent;
53 border-right:50px dotted transparent;
54 cursor:pointer;
55 }
56 #hex li a span {
57 display:block;
58 height:50px;
59 background:#000;
60 line-height:50px;
61 cursor:pointer;
62 }
63 #hex li a em {
64 display:block;
65 height:0;
66 width:0;
67 overflow:hidden;
68 border-top:30px solid #000;
69 border-left:50px dotted transparent;
70 border-right:50px dotted transparent;
71 cursor:pointer;
72 }
73 #hex li a:hover {
74 border:0;
75 color:#000;
76 }
77 #hex li a:hover b {
78 border-bottom-color:#ff0;
79 }
80 #hex li a:hover span {
81 background-color:#ff0;
82 }
83 #hex li a:hover em {
84 border-top-color:#ff0;
85 }
86 </style>
87 </head>
88 <body>
89 <ul id="hex">
90 <li class="p1"><a href="#"><b></b><span>home</span><em></em></a></li>
91 <li><a href="#"><b></b><span>blog</span><em></em></a></li>
92 <li class="p2"><a href="#"><b></b><span>about</span><em></em></a></li>
93 <li class="p2"><a href="#"><b></b><span>help</span><em></em></a></li>
94 <li class="p2"><a href="#"><b></b><span>faq</span><em></em></a></li>
95 <li class="p1 p2"><a href="#"><b></b><span>shop</span><em></em></a></li>
96 <li class="p2"><a href="#"><b></b><span>photo</span><em></em></a></li>
97 </ul>
98 </body>
99 </html>
jimmy1985