当前位置：移动技术网 > IT编程>网页制作>CSS > 网页布局+纯CSS纵向下拉菜单 IE6/IE7兼容

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

2017年12月08日 | 移动技术网IT编程 | 我要评论

易才招聘网,封神太子修改,新闻论坛

网页布局+纯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>  
</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>    
              <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需刷新才能执行]

您可能感兴趣的文章:

如对本文有疑问，请在下面进行留言讨论，广大热心网友会与你互动！！点击进行留言回复

CSS3实现缺角矩形，折角矩形以及缺角边框

这篇文章主要介绍了CSS3实现缺角矩形，折角矩形以及缺角边框，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小... [阅读全文]
详解CSS3新增的背景属性

CSS3新增属性：background-clip ，background-origin ， background-size，本文给大家分享CSS3新增的背景属性... [阅读全文]
css3 flex布局 justify-content:space-between 最后一行左对齐

这篇文章主要介绍了css3 flex布局 justify-content:space-between 最后一行左对齐,文中通过示例代码介绍的非常详细，对大家的学... [阅读全文]
详解如何使用CSS3中的结构伪类选择器和伪元素选择器

这篇文章主要介绍了详解如何使用CSS3中的结构伪类选择器和伪元素选择器，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们... [阅读全文]
CSS3 旋转立方体问题详解

这篇文章主要介绍了CSS3 旋转立方体问题详解，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学... [阅读全文]
Grid 宫格常用布局的实现

这篇文章主要介绍了Grid 宫格常用布局的实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学... [阅读全文]
css3一个简易的 LED 数字时钟实现方法

这篇文章主要介绍了css3一个简易的 LED 数字时钟实现方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着... [阅读全文]
2分钟教你实现环形/扇形菜单(基础版)

这篇文章主要介绍了2分钟教你实现环形/扇形菜单(基础版)，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来... [阅读全文]
CSS3实现网站商品展示效果图

这篇文章主要介绍了CSS3实现网站商品展示效果图，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习... [阅读全文]
如何用border-image实现文字气泡边框的示例代码

这篇文章主要介绍了如何用border-image实现文字气泡边框的示例代码，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋... [阅读全文]

网友评论


验证码：

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

2017年12月08日 | 移动技术网IT编程 | 我要评论

您可能感兴趣的文章:

相关文章:

网友评论