上週和大家介紹了純CSS3製作的下拉式選單，不過由於IE沒有完整支援CSS 3 所以會有些狀況，今天來教大家如何讓IE也能正常地使用下拉式選單，當然效果就沒有能完整支援的這麼好了，不過還是能夠正常運行的。

DEMO範例

觀看範例(請用IE 及 IE以外的瀏覽器觀看，可以看得出差別，而IE8和IE9也會有些微差異)

語法說明

html部分，由於較舊的IE版本沒有完整支援CSS3的一些屬性，例如漸層效果gradient 、 IE8之前不支援圓角效果border-radius 、文字陰影text-shadow 、區塊陰影box-shadow、css transform...，所以我們使用之前提到的條件式註解，當瀏覽器是IE的時候讀取專屬的CSS，語法如下
<!--[if IE]>
<link rel="stylesheet" href="/styleie.css" />
<![endif]-->


html部分，一樣使用ul li建立選單結構

<ul id="nav">
　<li>
　　<a href="#">選單1</a>
　　<ul>
　　　<li><a href="#">子項目</a></li>
　　　<li><a href="#">子項目</a></li>
　　　<li><a href="#">子項目</a></li>
　　</ul>
　</li>
　<li>
　<a href="#">選單2</a>
　<ul>
　　<li><a href="#">子項目</a></li>
　　<li><a href="#">子選單</a>
　　　<ul>
　　　　<li><a href="#">子項目</a></li>
　　　　<li><a href="#">子項目</a></li>
　　　　<li><a href="#">子項目</a></li>
　　　</ul>
　　</li>
　　<li>
　　　<a href="#">子選單</a>
　　　<ul>
　　　　<li><a href="#">子項目</a></li>
　　　　<li><a href="#">子項目</a></li>
　　　　<li><a href="#">子項目</a></li>
　　　</ul>
　　</li>
　　<li>
　　　<a href="#">子選單</a>
　　　<ul>
　　　　<li><a href="#">子項目</a></li>
　　　　<li><a href="#">子項目</a></li>
　　　　<li><a href="#">子項目</a></li>
　　　　<li><a href="#">子項目</a></li>
　　　</ul>
　　</li>
　　<li><a href="#">子項目</a></li>
　　</ul>
　</li>
</ul>

專屬IE的CSS的部分如下，其他的CSS就參照上一篇即可，這部分只是修正IE不支援。

#nav li a{
background:#ddd;
}

#nav li ul{
background:#dbdbdb;
display:none;
}

#nav li ul li a:hover{
background: #9ddcf5;
}