Usage: Copy the following code to your html file and save it,
<! DOCTYPE html PUBLIC "-// W3C // dtd xhtml 1.0 Transitional // EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<Html>
<Head>
<Meta http-equiv = "Content-Type" c/>
<Title> the drop-down menu of pure CSS supports IE6 IE7 Firefox </title>
<Style type = "text/css">
* {Margin: 0; padding: 0 ;}
. Menu {font-size: 12px; position: relative; z-index: 100 ;}
. Menu ul {list-style: none ;}
. Menu li {float: left; position: relative ;}
. Menu ul {visibility: hidden; position: absolute; left: 3px; top: 23px ;}
. Menu table {position: absolute; top: 0; left: 0 ;}
. Menu ul li: hover ul,
. Menu ul a: hover ul {visibility: visible ;}
. Menu a {display: block; border: 1px solid # aaa; background: red; padding: 2px 10px; margin: 3px; color: # fff; text-decoration: none ;}
. Menu a: hover {background: # f2cdb0; color: # f00; border: 1px solid red ;}
. Menu ul {}
. Menu ul li {clear: both; text-align: left; font-size: 12px ;}
. Menu ul li a {display: block; width: 100px; height: 13px; margin: 0; border: 0; border-bottom: 1px solid red ;}
. Menu ul li a: hover {border: 0; background: # f2cdb0; border-bottom: 1px solid # fff ;}
</Style>
</Head>
<Body>
<Div class = "menu">
<Ul>
<Li> <a href = ""> XHTML/CSS
<! -- [If IE 7]> <! --> </A> <! -- <! [Endif] -->
<! -- [If lte IE 6]> <table> <tr> <td> <! [Endif] -->
<Ul>
<Li> <a href = ""> standard </a> </li>
<Li> <a href = ""> tutorial </a> </li>
<Li> <a href = ""> technical article </a> </li>
<Li> <a href = ""> FAQs </a> </li>
<Li> <a href = ""> Layout tutorial </a> </li>
<Li> <a href = ""> CSS menu </a> </li>
<Li> <a href = ""> browser compatibility </a> </li>
<Li> <a href = ""> scroll bar </a> </li>
<Li> <a href = ""> rounded rectangle topic </a> </li>
<Li> <a href = ""> Special CSS effect appreciation topic </a> </li>
</Ul>
<! -- [If lte IE 6]> </td> </tr> </table> </a> <! [Endif] -->
</Li>
<Li> <a href = ""> AJAX
<! -- [If IE 7]> <! --> </A> <! -- <! [Endif] -->
<! -- [If lte IE 6]> <table> <tr> <td> <! [Endif] -->
<Ul>
<Li> <a href = ""> AJAX tutorial </a> </li>
<Li> <a href = ""> AJAX technology </a> </li>
</Ul>
<! -- [If lte IE 6]> </td> </tr> </table> </a> <! [Endif] -->
</Li>
<Li> <a href = ""> Javascript
<! -- [If IE 7]> <! --> </A> <! -- <! [Endif] -->
<! -- [If lte IE 6]> <table> <tr> <td> <! [Endif] -->
<Ul>
<Li> <a href = ""> JSON </a> </li>
<Li> <a href = ""> technical article </a> </li>
</Ul>
<! -- [If lte IE 6]> </td> </tr> </table> </a> <! [Endif] -->
</Li>
<Li> <a href = ""> DOM </a> </li>
<Li> <a href = ""> XML </a> </li>
<Li> <a href = ""> Regular expression
<! -- [If IE 7]> <! --> </A> <! -- <! [Endif] -->
<! -- [If lte IE 6]> <table> <tr> <td> <! [Endif] -->
<Ul>
<Li> <a href = ""> Regular expression introduction </a> </li>
<Li> <a href = ""> Regular expression path </a> </li>
</Ul>
<! -- [If lte IE 6]> </td> </tr> </table> </a> <! [Endif] -->
</Li>
<Li> <a href = ""> website optimization </a> </li>
<Li> <a href = ""> Computer network </a> </li>
<Li> <a href = ""> website Construction Technology
<! -- [If IE 7]> <! --> </A> <! -- <! [Endif] -->
<! -- [If lte IE 6]> <table> <tr> <td> <! [Endif] -->
<Ul>
<Li> <a href = ""> PHP </a> </li>
<Li> <a href = ""> ASP </a> </li>
<Li> <a href = ""> ASP. NET </a> </li>
<Li> <a href = ""> JSP </a> </li>
<Li> <a href = ""> SQL </a> </li>
<Li> <a href = ""> Flash </a> </li>
<Li> <a href = ""> Dreamweaver </a> </li>
</Ul>
<! -- [If lte IE 6]> </td> </tr> </table> </a> <! [Endif] -->
</Li>
</Ul>
</Div>
<Br/>
<A href = "http://www.div-css.com" target = "_ blank"> </a>
Css drop down menu
</Body>
</Html>
