网页布局+纯CSS纵向下拉菜单IE6/IE7兼容_经验交流

2020-11-27 来源：小奈知识网

网页布局+纯CSS纵向下拉菜单 IE6/IE7兼容

<html xmlns="http://www.w3.org/1999/xhtml" lang="gb2312"> 
<head> 
<title>网页布局+纯CSS纵向下拉菜单</title> 
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> 
<meta http-equiv="Content-Language" content="gb2312" /> 
<meta content="all" name="robots" /> 
<meta name="author" content="7273771@gmail.com,阳诡子,QQ:7273771" /> 
<meta name="Copyright" content="blog.529600.com,共同探讨,允许转载" /> 
<meta name="description" content="下拉菜单,CSS,布局" /> 
<meta content="下拉,菜单,CSS,布局" name="keywords" /> 
 
<style type=text/css> 
*{ 
 margin:0; 
 padding:0; 
 border:0; 
} 
html{ 
 background:#bfc4c7;/*背景颜色*/ 
} 
body{ 
 font:12px/150% '宋体'; 
 margin:0 auto; 
 width:770px; 
 text-align:center; 
} 
#menu,#nav,#footer{ 
 clear:both; 
} 
#nav{ 
 padding-left:20px; 
 text-align:left; 
 background:#a60; 
} 
#footer{ 
 background:#a30; 
} 
#logo,#banner,#mail,#left,#middle,#right{ 
 float:left; 
 width:180px; 
 background:#f00; 
} 
#logo,#banner,#mail{ 
 height:60px; 
} 
#banner{ 
 width:468px; 
 background:#f60; 
} 
#mail{ 
 width:122px; 
 background:#f90; 
} 
#left,#right{ 
 width:200px; 
} 
#left{ 
 background:#093; 
} 
#middle{ 
 width:370px; 
 background:#063; 
} 
#right{ 
 background:#033; 
}

/*menu部分*/

#menu{ 
 margin:0 auto; 
 
 width:770px!important; 
 clear:both 
} 
#menu ul{ 
 list-style:none; 
} 
#menu li { 
 float:left; 
 position:relative; 
} 
#menu ul ul { 
 visibility:hidden; 
 position:absolute; 
 left:0px; 
 top:30px; 
} 
#menu table{ 
 position:absolute; 
 left:0; 
 top:0; 
} 
#menu ul li:hover ul,#menu ul a:hover ul{ 
 visibility:visible; 
} 
#menu a{ 
 display:block; 
 text-align:center; 
 text-decoration:none; 
 width:77px; 
 height:30px; 
 color:#000; 
 line-height:30px; 
 background:#c9c9a7; 
} 
#menu a:hover{ 
 color:#fff; 
 background:#b3ab79; 
} 
#menu ul ul li { 
 clear:both; 
 text-align:left; 
} 
#menu ul ul li a{ 
 display:block; 
 width:77px; 
 height:30px; 
 background:#faeec7; 
 color:#000; 
} 
#menu ul ul li a:hover{ 
 background:#dfc184; 
 color:#000; 
}

</style> 
</head> 
<body> 
 
 logo 
 
 
 banner 
 
 
 mail 
 
 
 
 <li> 
 第一分类 
 <table> 
 <tr> 
 <td> 
 
 <li>XHTML</li> 
 <li>CSS</li> 
 <li>PHP</li> 
 <li>MySQL</li> 
 <li>Fireworks</li> 
 <li>Photoshop</li> 
 <li>Flash</li> 
 <li>Illustrator</li> 
 
 </td> 
 </tr> 
 </table> 
 
 </li> 
 <li> 
 第一分类 
 <table> 
 <tr> 
 <td> 
 
 <li>XHTML</li> 
 <li>CSS</li> 
 <li>PHP</li> 
 <li>MySQL</li> 
 <li>Fireworks</li> 
 <li>Photoshop</li> 
 <li>Flash</li> 
 <li>Illustrator</li> 
 
 </td> 
 </tr> 
 </table> 
 
 </li> 
 <li> 
 第一分类 
 <table> 
 <tr> 
 <td> 
 
 <li>XHTML</li> 
 <li>CSS</li> 
 <li>PHP</li> 
 <li>MySQL</li> 
 <li>Fireworks</li> 
 <li>Photoshop</li> 
 <li>Flash</li> 
 <li>Illustrator</li> 
 
 </td> 
 </tr> 
 </table> 
 
 </li> 
 <li> 
 第一分类 
 <table> 
 <tr> 
 <td> 
 
 <li>XHTML</li> 
 <li>CSS</li> 
 <li>PHP</li> 
 <li>MySQL</li> 
 <li>Fireworks</li> 
 <li>Photoshop</li> 
 <li>Flash</li> 
 <li>Illustrator</li> 
 
 </td> 
 </tr> 
 </table> 
 
 </li> 
 <li> 
 第一分类 
 <table> 
 <tr> 
 <td> 
 
 <li>XHTML</li> 
 <li>CSS</li> 
 <li>PHP</li> 
 <li>MySQL</li> 
 <li>Fireworks</li> 
 <li>Photoshop</li> 
 <li>Flash</li> 
 <li>Illustrator</li> 
 
 </td> 
 </tr> 
 </table> 
 
 </li> 
 <li> 
 第一分类 
 <table> 
 <tr> 
 <td> 
 
 <li>XHTML</li> 
 <li>CSS</li> 
 <li>PHP</li> 
 <li>MySQL</li> 
 <li>Fireworks</li> 
 <li>Photoshop</li> 
 <li>Flash</li> 
 <li>Illustrator</li> 
 
 </td> 
 </tr> 
 </table> 
 
 </li> 
 <li> 
 第一分类 
 <table> 
 <tr> 
 <td> 
 
 <li>XHTML</li> 
 <li>CSS</li> 
 <li>PHP</li> 
 <li>MySQL</li> 
 <li>Fireworks</li> 
 <li>Photoshop</li> 
 <li>Flash</li> 
 <li>Illustrator</li> 
 
 </td> 
 </tr> 
 </table> 
 
 </li> 
 <li> 
 第一分类 
 <table> 
 <tr> 
 <td> 
 
 <li>XHTML</li> 
 <li>CSS</li> 
 <li>PHP</li> 
 <li>MySQL</li> 
 <li>Fireworks</li> 
 <li>Photoshop</li> 
 <li>Flash</li> 
 <li>Illustrator</li> 
 
 </td> 
 </tr> 
 </table> 
 
 </li> 
 <li> 
 第一分类 
 <table> 
 <tr> 
 <td> 
 
 <li>XHTML</li> 
 <li>CSS</li> 
 <li>PHP</li> 
 <li>MySQL</li> 
 <li>Fireworks</li> 
 <li>Photoshop</li> 
 <li>Flash</li> 
 <li>Illustrator</li> 
 
 </td> 
 </tr> 
 </table> 
 
 </li> 
 <li> 
 第一分类 
 <table> 
 <tr> 
 <td> 
 
 <li>XHTML</li> 
 <li>CSS</li> 
 <li>PHP</li> 
 <li>MySQL</li> 
 <li>Fireworks</li> 
 <li>Photoshop</li> 
 <li>Flash</li> 
 <li>Illustrator</li> 
 
 </td> 
 </tr> 
 </table> 
 
 </li> 
 
 
 
 您的位置:网站首页 
 
 
 left 
 
 
 middle 
 
 
 right 
 
 
 footer 
 
</body> 
</html>

[Ctrl+A 全选注:如需引入外部Js需刷新才能执行]

显示全文

全部栏目

网页布局+纯CSS纵向下拉菜单IE6/IE7兼容_经验交流