您现在的位置是：网站首页> 编程资料编程资料

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

2023-05-25 317人已围观

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

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

<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><div id="logo"> logo </div><div id="banner"> banner </div><div id="mail"> mail </div><div id="menu"><ul><li><a href="">第一分类<ul><li><a href="">XHTML</a></li><li><a href="">CSS</a></li><li><a href="">PHP</a></li><li><a href="">MySQL</a></li><li><a href="">Fireworks</a></li><li><a href="">Photoshop</a></li><li><a href="">Flash</a></li><li><a href="">Illustrator</a></li></ul></li><li><a href="">第一分类<ul><li><a href="">XHTML</a></li><li><a href="">CSS</a></li><li><a href="">PHP</a></li><li><a href="">MySQL</a></li><li><a href="">Fireworks</a></li><li><a href="">Photoshop</a></li><li><a href="">Flash</a></li><li><a href="">Illustrator</a></li></ul></li><li><a href="">第一分类<ul><li><a href="">XHTML</a></li><li><a href="">CSS</a></li><li><a href="">PHP</a></li><li><a href="">MySQL</a></li><li><a href="">Fireworks</a></li><li><a href="">Photoshop</a></li><li><a href="">Flash</a></li><li><a href="">Illustrator</a></li></ul></li><li><a href="">第一分类<ul><li><a href="">XHTML</a></li><li><a href="">CSS</a></li><li><a href="">PHP</a></li><li><a href="">MySQL</a></li><li><a href="">Fireworks</a></li><li><a href="">Photoshop</a></li><li><a href="">Flash</a></li><li><a href="">Illustrator</a></li></ul></li><li><a href="">第一分类<ul><li><a href="">XHTML</a></li><li><a href="">CSS</a></li><li><a href="">PHP</a></li><li><a href="">MySQL</a></li><li><a href="">Fireworks</a></li><li><a href="">Photoshop</a></li><li><a href="">Flash</a></li><li><a href="">Illustrator</a></li></ul></li><li><a href="">第一分类<ul><li><a href="">XHTML</a></li><li><a href="">CSS</a></li><li><a href="">PHP</a></li><li><a href="">MySQL</a></li><li><a href="">Fireworks</a></li><li><a href="">Photoshop</a></li><li><a href="">Flash</a></li><li><a href="">Illustrator</a></li></ul></li><li><a href="">第一分类<ul><li><a href="">XHTML</a></li><li><a href="">CSS</a></li><li><a href="">PHP</a></li><li><a href="">MySQL</a></li><li><a href="">Fireworks</a></li><li><a href="">Photoshop</a></li><li><a href="">Flash</a></li><li><a href="">Illustrator</a></li></ul></li><li><a href="">第一分类<ul><li><a href="">XHTML</a></li><li><a href="">CSS</a></li><li><a href="">PHP</a></li><li><a href="">MySQL</a></li><li><a href="">Fireworks</a></li><li><a href="">Photoshop</a></li><li><a href="">Flash</a></li><li><a href="">Illustrator</a></li></ul></li><li><a href="">第一分类<ul><li><a href="">XHTML</a></li><li><a href="">CSS</a></li><li><a href="">PHP</a></li><li><a href="">MySQL</a></li><li><a href="">Fireworks</a></li><li><a href="">Photoshop</a></li><li><a href="">Flash</a></li><li><a href="">Illustrator</a></li></ul></li><li><a href="">第一分类<ul><li><a href="">XHTML</a></li><li><a href="">CSS</a></li><li><a href="">PHP</a></li><li><a href="">MySQL</a></li><li><a href="">Fireworks</a></li><li><a href="">Photoshop</a></li><li><a href="">Flash</a></li><li><a href="">Illustrator</a></li></ul></li></ul></div><div id="nav"> 您的位置:网站首页 </div><div id="left"> left </div><div id="middle"> middle </div><div id="right"> right </div><div id="footer"> footer </div>

[Ctrl+A 全选注:引入外部Js需再刷新一下页面才能执行]

您可能感兴趣的文章:

上一篇：CSS hack实现 CSS完美兼容IE6/IE7/FF的通用方法_经验交流_

下一篇：CSS图片拼合生成器只需上传zip包即可_经验交流_

您现在的位置是：网站首页> 编程资料编程资料

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

相关内容

点击排行

本栏推荐

猜你喜欢