兼容IE各版本的纯CSS二级下拉菜单

2024-09-05 12:20:25

字体：大中小

来源：转载

供稿：网友

这是一个标准的CSS下拉菜单制作教程，有针对目前流行的IE6/IE7/IE8不同版本的CSS代码，因此可以在IE之间完全兼容，不过其它的浏览器像火狐/GG浏览器之类的没有测试，如果兼容IE8的话，那么兼容火狐应该问题不大吧。菜单使用蓝色基调，滑向二级菜单更换背景，操作的感觉很舒服。

<!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><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><title>纯css下拉菜单</title><style>body {	font-family:verdana, sans-serif; 	font-size:small;}#navigation , #navigation li ul{	padding:0; 	margin:0;	list-style-type: none;}#navigation li {	float:left;	text-align:center;	position:relative;}#navigation li h3 {	margin:0; }#navigation li a:link, #navigation li a:visited {	display:block; 	text-decoration:none; 	color:#000; 	width:120px; 	height:40px; 	line-height:40px; 	border:1px solid #fff; 	border-width:1px 1px 0 0; 	background:#c5dbf2; 	padding-left:10px; }#navigation li ul {	display: none;}table {	margin:-1px; 	border-collapse:collapse;}/* 以下只支持非IE6浏览器 */#navigation li:hover a {	color:#fff;	background:#2687eb;}#navigation li:hover ul {	display:block; 	position:absolute; 	top:40px;	margin-top:1px;	left:0; 	width:120px;}#navigation li:hover ul li a {	display:block; 	background:#c5dbf2; 	color:#000; 	height:20px; 	line-height:20px; 	padding:5px 10px; 	width:110px;}#navigation li:hover ul li a:hover {	color:#fff;	background:#6b839c; }</styel></head><body>	<ul id="navigation">		<li>			网站首页															<table><tbody><tr><td>			<ul>				<li>最新更新</li>				<li>网页特效</li>			</ul>			</td></tr></tbody></table>					</li>		<li>			源码资源											<table><tbody><tr><td>			<ul>				<li>ASP</li>				<li>PHP</li>				<li>AJAX</li>			</ul>			</td></tr></tbody></table>					</li>		<li>			网页特效											<table><tbody><tr><td>			<ul>				<li>导航</li>				<li>布局</li>				<li>表单</li>			</ul>			</td></tr></tbody></table>					</li>	</ul></body></html>

上一篇：蓝白相间纯CSS悬停立体效果导航菜单

下一篇：这么简单就实现了CSS滑动菜单（滑动门）