CSS 制作三角形按钮

<style type="text/css">
<!--#menu {
 width:500px;
 padding:0;
 margin:40px auto;
list-style-type:none;
display:table;
}

#menu li {
width:100px;
float:left;
line-height:30px
}#menu a {
position:relative;
display:block;
text-decoration:none;
background:#cccccc;
width:100px;
}

#menu a span {
display:block;
font-weight:bold;
color:#000;
 border-style:solid;
border-width:0px 2px 2px 0px;
border-color:#fff #fff #06a #fff;
text-align:center;
}

#menu a em {
display:none;

}#menu a:hover {
background:#FF0000;
}

#menu a:hover span {
 color:#fff;
}

#menu a:hover em {
display:block;
overflow:hidden;
border:6px solid #06a;
border-color:#06a #fff;
border-width:6px 6px 0 6px;
position:absolute;
left:50%;
top:100%;
margin-left:-6px;
 }

-->
</style>
<ul id="menu">
<li><a href="#nogo"><span>M One</span><em></em></a></li>
<li><a href="#nogo"><span>M Two</span><em></em></a></li>
<li><a href="#nogo"><span>M Three</span><em></em></a></li>
<li><a href="#nogo"><span>M Four</span><em></em></a></li>
</ul>

• M One
• M Two
• M Three
• M Four