兼容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滑動菜單（滑動門）