[纯css下拉菜单]兼容各浏览器,需下载csshover.htc文件

View Code

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style>
*{margin:0; padding:0; list-style-type:none}

body{behavior:url("http://iz100.com/htc/csshover.htc");}

ul.nav, ul.nav ul{float:left; border:1px solid #486B02; background:#8BD400}

ul.nav li{float:left; width:8em; background:#8BD400}

ul.nav li ul{width:8em; position:absolute;left:-999em;}

.nav li:hover ul{left:auto;}

ul.nav a{display:block; color:#2B3F00;text-decoration:none;padding:0.3em 1em; border-right:1px solid #486B02;border-left:1px solid #E4FFD3}

ul.nav li li a{border-top:1px solid #E4FFD3;border-bottom:1px solid #486B02;border-left:0;border-right:0}

ul.nav li:last-child a{border-right:0; border-bottom:0}

ul a:hover, ul a:focus{color:#E4FFD3;background-color:#6DA203}


</style>
</head>
<body>
<ul class="nav">
    <li><a href="###">Home</a></li>
    <li><a href="###">Products</a>
        <ul>
            <li><a href="###">Silverback</a></li>
            <li><a href="###">Font Deck</a></li>
        </ul>
    </li>
    <li><a href="###">Services</a></li>
</ul>
</body>
</html>

注意:需要在服务器才能运行:body{behavior:url("http://iz100.com/htc/csshover.htc");}这句代码

效果: