记录.NET学习的点滴，欢迎收藏我的博客

作者:路过秋天 http://cyq1162.cnblogs.com | www.mmic.net.cn欢迎大家交流，这里是我记录的空间方便以后工作查找
公告信息
记录.NET学习的点滴，欢迎收藏我的博客
文章分类
文章档案
文章
业余制作的CSS纵向下拉菜单
2011/7/5 21:37:29
以下是代码片段：
<!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;
  position:relative;
  width:770px!important;
}
#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">
    您的位置:IC交易网网站首页
  </div>
  <div id="left">
    left
  </div>
  <div id="middle">
    middle
  </div>
  <div id="right">
    right
  </div>
  <div id="footer">
    footer
  </div>
</body><!--网页主体结束-->
</html>
新浪微博粉丝精灵，刷粉丝、刷评论、刷转发、企业商家微博营销必备工具"
 MyQBlog   浏览(2312)   评论(0)   关键字
:会员注册
  
Copyright © 2010-2020 power by CYQ.Blog - 秋色园 v2.0 All Rights Reserved