网页布局+纯CSS纵向下拉菜单 IE6/IE7兼容
网页布局+纯CSS纵向下拉菜单 IE6/IE7兼容<!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="">第一分类<!--><!--></a><!--<!--><!--> <table> <tr> <td><!--> <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><!--> </td> </tr> </table> </a><!--> </li> <li> <a href="">第一分类<!--><!--></a><!--<!--><!--> <table> <tr> <td><!--> <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><!--> </td> </tr> </table> </a><!--> </li> <li> <a href="">第一分类<!--><!--></a><!--<!--><!--> <table> <tr> <td><!--> <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><!--> </td> </tr> </table> </a><!--> </li> <li> <a href="">第一分类<!--><!--></a><!--<!--><!--> <table> <tr> <td><!--> <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><!--> </td> </tr> </table> </a><!--> </li> <li> <a href="">第一分类<!--><!--></a><!--<!--><!--> <table> <tr> <td><!--> <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><!--> </td> </tr> </table> </a><!--> </li> <li> <a href="">第一分类<!--><!--></a><!--<!--><!--> <table> <tr> <td><!--> <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><!--> </td> </tr> </table> </a><!--> </li> <li> <a href="">第一分类<!--><!--></a><!--<!--><!--> <table> <tr> <td><!--> <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><!--> </td> </tr> </table> </a><!--> </li> <li> <a href="">第一分类<!--><!--></a><!--<!--><!--> <table> <tr> <td><!--> <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><!--> </td> </tr> </table> </a><!--> </li> <li> <a href="">第一分类<!--><!--></a><!--<!--><!--> <table> <tr> <td><!--> <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><!--> </td> </tr> </table> </a><!--> </li> <li> <a href="">第一分类<!--><!--></a><!--<!--><!--> <table> <tr> <td><!--> <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><!--> </td> </tr> </table> </a><!--> </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>测试代码：
文档来源：脚本之家https://www.jb51.net/article/12964.htm
页:
[1]