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

POOPE

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><!--定义过渡型DOCTYPE-->  <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" /><!--关键词-->  <!--CSS样式开始-->  <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><!--CSS样式结束-->  </head><!--网页头部结束-->  <body><!--网页主体开始-->  <div id="logo">    logo  </div>  <div id="banner">    banner  </div>  <div id="mail">    mail  </div>  <div id="menu">    <ul>    <li>    <a href="">第一分类<!--[if IE 7]><!--></a><!--<![endif]--><!--[if lte IE 6]>      <table>      <tr>        <td><![endif]-->          <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><!--[if lte IE 6]>        </td>      </tr>      </table>    </a><![endif]-->    </li>    <li>    <a href="">第一分类<!--[if IE 7]><!--></a><!--<![endif]--><!--[if lte IE 6]>      <table>      <tr>        <td><![endif]-->          <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><!--[if lte IE 6]>        </td>      </tr>      </table>    </a><![endif]-->    </li>    <li>    <a href="">第一分类<!--[if IE 7]><!--></a><!--<![endif]--><!--[if lte IE 6]>      <table>      <tr>        <td><![endif]-->          <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><!--[if lte IE 6]>        </td>      </tr>      </table>    </a><![endif]-->    </li>    <li>    <a href="">第一分类<!--[if IE 7]><!--></a><!--<![endif]--><!--[if lte IE 6]>      <table>      <tr>        <td><![endif]-->          <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><!--[if lte IE 6]>        </td>      </tr>      </table>    </a><![endif]-->    </li>    <li>    <a href="">第一分类<!--[if IE 7]><!--></a><!--<![endif]--><!--[if lte IE 6]>      <table>      <tr>        <td><![endif]-->          <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><!--[if lte IE 6]>        </td>      </tr>      </table>    </a><![endif]-->    </li>    <li>    <a href="">第一分类<!--[if IE 7]><!--></a><!--<![endif]--><!--[if lte IE 6]>      <table>      <tr>        <td><![endif]-->          <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><!--[if lte IE 6]>        </td>      </tr>      </table>    </a><![endif]-->    </li>    <li>    <a href="">第一分类<!--[if IE 7]><!--></a><!--<![endif]--><!--[if lte IE 6]>      <table>      <tr>        <td><![endif]-->          <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><!--[if lte IE 6]>        </td>      </tr>      </table>    </a><![endif]-->    </li>    <li>    <a href="">第一分类<!--[if IE 7]><!--></a><!--<![endif]--><!--[if lte IE 6]>      <table>      <tr>        <td><![endif]-->          <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><!--[if lte IE 6]>        </td>      </tr>      </table>    </a><![endif]-->    </li>    <li>    <a href="">第一分类<!--[if IE 7]><!--></a><!--<![endif]--><!--[if lte IE 6]>      <table>      <tr>        <td><![endif]-->          <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><!--[if lte IE 6]>        </td>      </tr>      </table>    </a><![endif]-->    </li>    <li>    <a href="">第一分类<!--[if IE 7]><!--></a><!--<![endif]--><!--[if lte IE 6]>      <table>      <tr>        <td><![endif]-->          <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><!--[if lte IE 6]>        </td>      </tr>      </table>    </a><![endif]-->    </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>  </body><!--网页主体结束-->  </html>

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

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

相关帖子

利用CSS换变文本选中后的颜色

常用的css伪类a标签

Q+CSS+DIV多彩随机变化链接样式tag标签样式

常用HTML网页跳转的几种方法

利用php/html实现随机抓取网页图片,视频做背景

好看的CSS剪裁GIF背景图片动画特效

利用HTML、CSS和JS制作随机密码生成器

css如何调整字体颜色

javascript如何改变背景

react如何引入css

POOPE LV4