揭密全兼容的CSS下拉菜单的编写

2024-09-05 12:20:08

字体：大中小

来源：转载

供稿：网友

本CSS菜单将向你揭密全兼容CSS菜单的编写，有针对IE6和IE7的CSS代码。二级下拉，认真看一下代码，研究一下IE6和IE7在CSS解析方面究竟有什么不同之处，这对你以后编写符合WEB标准的全兼容CSS应用有很大帮助。

<!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 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;} /* 以下只支持非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; }</style></head><body>	<ul id="navigation">		<li>			栏目1															<table><tr><td>			<ul>				<li>栏目1-->菜单1</li>				<li>栏目1-->菜单2</li>				<li>栏目1-->菜单3</li>				<li>栏目1-->菜单4</li>			</ul>			</td></tr></table>					</li>		<li>			栏目2											<table><tr><td>			<ul>				<li>栏目2-->菜单1</li>				<li>栏目2-->菜单2</li>				<li>栏目2-->菜单3</li>				<li>栏目2-->菜单4</li>				<li>栏目2-->菜单5</li>			</ul>			</td></tr></table>					</li>		<li>			栏目3											<table><tr><td>			<ul>				<li>栏目3-->菜单1</li>				<li>栏目3-->菜单2</li>				<li>栏目3-->菜单3</li>			</ul>			</td></tr></table>					</li>	</ul></body></html>

上一篇：上下伸展的JS菜单

下一篇：CSS深蓝色鼠标悬停放大的国外菜单