支持IE8的纯css3开发的响应式设计动画菜单教程

　　这是一个响应式设计的菜单。单击列表图标，当你显示屏大小可以完全水平放下所有菜单项时，菜单水平显示（如图1）。当你的显示屏不能水平放置所有菜单项时，菜单垂直显示（如图2）。 而且显示的时候是以动画的型式显示。效果相当的好。

图1

图2

　　下面是实现的代码。

　　html代码：

1. <div class="container">  
2.         <!--[if lte IE 8]>  
3. <style>  
4.   
5.         .iconicmenu > label{   
6.         border-width: 7px;   
7.         background: #eee;   
8.         }   
9.            
10.         .iconicmenu:hover ul{   
11.             left: 8px; /* show menu onmouseover in IE8 and below */   
12.         }   
13.   
14. </style>  
15. <![endif]-->  
16.         <div class="iconicmenu">  
17.             <input type="checkbox" id="togglebox" />  
18.             <ul>  
19.                 <li><a targe="_blank" href="http://www.jb51.net/Shili/css3%E8%8F%9C%E5%8D%95">Home</a></li>  
20.                 <li><a targe="_blank" href="http://www.jb51.net/Shili/css3%E8%8F%9C%E5%8D%95">DHTML</a></li>  
21.                 <li><a targe="_blank" href="http://www.jb51.net/Shili/css3%E8%8F%9C%E5%8D%95">CSS Library</a></li>  
22.                 <li><a targe="_blank" href="http://www.jb51.net/Shili/css3%E8%8F%9C%E5%8D%95">CSS Gallery</a></li>  
23.                 <li><a targe="_blank" href="http://www.jb51.net/Shili/css3%E8%8F%9C%E5%8D%95">JavaScript</a></li>  
24.