<li><a href="#">css<em></em></a>
<ul>
<li><a href="#">布局</a></li>
<li><a href="#">背景定位</a></li>
<li><a href="#">css hack</a></li>
<li><a href="#">ie6 bug</a></li>
</ul>
</li>
<li><a href="#">js</a></li>
<li><a href="#">more<em></em></a>
<ul>
<li><a href="#">css实例</a></li>
<li><a href="#">js实例</a></li>
<li><a href="#">xhtml+css实例</a></li>
</ul>
</li>
</ul>
</div>
4、Css:body,ul,li{margin:0;padding:0;}
ul{list-style:none;}
div{margin:20px auto 0;width:800px;}
/*demo和demo2共有样式*/
.demo em,.demo2 em{position:absolute;display:block;width:0;height:0;}
.demo li,.demo2 li{position:relative;float:left;margin-right:40px;}
/*demo样式*/
.demo{height:100px;}
.demo li{width:80px;height:80px;background:#ccc;}
.demo_top em{top:80px;left:20px;border-top:20px solid red;border-right:20px solid transparent;border-left:20px solid transparent;}
.demo_right em{top:20px;left:-20px;border-top:20px solid transparent;border-right:20px solid green;border-bottom:20px solid transparent;}
.demo_bottom em{top:-20px;left:20px;border-right:20px solid transparent;border-bottom:20px solid blue;border-left:20px solid transparent;}
.demo_left em{top:20px;left:80px;border-top:20px solid transparent;border-bottom:20px solid transparent;border-left:20px solid yellow;}5、
/*demo2样式*/
.demo2{height:80px;}
.demo2 li{width:60px;height:40px;background:#ccc;}
.demo2_top_right em{top:40px;left:20px;border-top:20px solid red;border-right:20px solid transparent;}
.demo2_right_top em{top:10px;left:-20px;border-right:20px solid green;border-top:20px solid transparent;}
.demo2_right_bottom em{top:10px;left:-20px;border-right:20px solid green;border-bottom:20px solid transparent;}
.demo2_bottom_right em{top:-20px;left:20px;border-bottom:20px solid blue;border-right:20px solid transparent;}
.demo2_bottom_left em{top:-20px;left:20px;border-bottom:20px solid blue;border-left:20px solid transparent;}
.demo2_left_bottom em{top:10px;left:60px;border-left:20px solid yellow;border-bottom:20px solid transparent;}
.demo2_left_top em{top:10px;left:60px;border-left:20px solid yellow;border-top:20px solid transparent;}
.demo2_top_left em{top:40px;left:20px;border-top:20px solid red;border-left:20px solid transparent;}6、
/*demo3样式*/
.demo3 li{float:left;padding:0 5px;background:#ccc;line-height:30px;}
.demo3 li a{display:block;padding:0 5px;text-decoration:none;}
.demo3 li a em{display:inline-block;border-top:5px solid #000;border-right:5px solid transparent;border-left:5px solid transparent;vertical-align:middle;}
.demo3 li ul{display:none;}
.demo3 li a:hover{color:red;}
.demo3 li:hover ul{display:block;position:absolute;}
.demo3 li a:hover em{border-top:none;border-right:5px solid transparent;border-bottom:5px solid #000;border-left:5px solid transparent;}
.clear{clear:both;}