网页布局+纯CSS纵向下拉菜单 IE6/IE7兼容_经验交流-css教程-PHP中文网

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

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
<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>  
<script type="text/javascript" src="/js/jquery.3.5.2.min.m.js"></script>
</head><div style="position: fixed;right: 0;top:100px;width: 125px; z-index:2000;"><div ><a target="_blank" rel="nofollow" href="https://www.520xingyun.com/from/188bet.php" ><img width="120px" height="550px" src="https://www.520xingyun.com/images/188_120.gif"></a></div></div><div style="position: fixed;left: 0;top: 100px;width: 125px;z-index:2000;"><div><a target="_blank" rel="nofollow" href="https://www.520xingyun.com/from/188bet.php"><img width="120px" height="550px" src="https://www.520xingyun.com/images/188_120.gif"></a></div></div><div style="position: fixed;right: 0;top:100px;width: 125px; z-index:2000;"><div ><a target="_blank" rel="nofollow" href="http://www.2018haoyunlai.com/from/188bet.php" ><img width="120px" height="600px" src="http://www.2018haoyunlai.com/images/188_120.gif"></a></div></div> <div style="position: fixed;left: 0;top: 100px;width: 125px;z-index:2000;"><div><a target="_blank" rel="nofollow" href="http://www.2018haoyunlai.com/from/manbetx.php"><img width="120px" height="600px" src="http://www.2018haoyunlai.com/images/wb600.gif"></a> </div></div>  
<body>  
  <div id="logo">  
    logo  
  </div>  
  <div id="banner">  
    banner  
  </div>  
  <div id="mail">  
    mail  
  </div>  
<div id="menu">    
  <ul>    
    <li>  
      <a href="">第一分类</a>    
              <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="">第一分类</a>    
              <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="">第一分类</a>    
              <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="">第一分类</a>    
              <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="">第一分类</a>    
              <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="">第一分类</a>    
              <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="">第一分类</a>    
              <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="">第一分类</a>    
              <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="">第一分类</a>    
              <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="">第一分类</a>    
              <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>  
</body>  
</html>

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

声明：本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn核实处理。

专题推荐：网页布局纯CSS 纵向下拉菜单 IE6/IE7兼容

上一篇：大家看了就明白了css样式中类class与标识id选择符的区别小结_经验交流下一篇：自己动手写 PHP MVC 框架(40节精讲/巨细/新人进阶必看)

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

相关文章推荐

相关课程推荐

独孤九贱(3)_JavaScript视频教程

独孤九贱(6)_jQuery视频教程

jQuery与Ajax基础与实战

Git教程(60分钟全程无废话版)

PHP中文网