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

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

网页布局+纯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;
}

logo

banner

mail

  • 第一分类

    • XHTML
    • CSS
    • PHP
    • MySQL
    • Fireworks
    • Photoshop
    • Flash
    • Illustrator

  • 第一分类
    • XHTML
    • CSS
    • PHP
    • MySQL
    • Fireworks
    • Photoshop
    • Flash
    • Illustrator

  • 第一分类
    • XHTML
    • CSS
    • PHP
    • MySQL
    • Fireworks
    • Photoshop
    • Flash
    • Illustrator

  • 第一分类
    • XHTML
    • CSS
    • PHP
    • MySQL
    • Fireworks
    • Photoshop
    • Flash
    • Illustrator

  • 第一分类
    • XHTML
    • CSS
    • PHP
    • MySQL
    • Fireworks
    • Photoshop
    • Flash
    • Illustrator

  • 第一分类
    • XHTML
    • CSS
    • PHP
    • MySQL
    • Fireworks
    • Photoshop
    • Flash
    • Illustrator

  • 第一分类
    • XHTML
    • CSS
    • PHP
    • MySQL
    • Fireworks
    • Photoshop
    • Flash
    • Illustrator

  • 第一分类
    • XHTML
    • CSS
    • PHP
    • MySQL
    • Fireworks
    • Photoshop
    • Flash
    • Illustrator

  • 第一分类
    • XHTML
    • CSS
    • PHP
    • MySQL
    • Fireworks
    • Photoshop
    • Flash
    • Illustrator

  • 第一分类
    • XHTML
    • CSS
    • PHP
    • MySQL
    • Fireworks
    • Photoshop
    • Flash
    • Illustrator

您的位置:网站首页

left

middle

right

footer

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

(0)

相关推荐

  • JS+CSS 制作的超级简单的下拉菜单附图

    先看效果:  代码: 复制代码 代码如下: <html> <head> <title>Good Test</title> <script> function showSubMenu(SubMenu) { document.getElementById(SubMenu).style.display = "inline"; } function HideSubMenu(SubMenu) { document.getElementB

  • jQuery+CSS 实现的超Sexy下拉菜单

     如何实现 Step 1 HTML 复制代码 代码如下: <ul class="topmenu"> <li><a href="#">Home</a></li> <li><a href="#">Tutorials</a> <ul class="submenu1"> <li><a href="#&

  • css+js下拉菜单

    css菜单演示 0? " ": "") + "sfhover"; } sfEls[i].onMouseDown=function() { this.className+=(this.className.length>0? " ": "") + "sfhover"; } sfEls[i].onMouseUp=function() { this.className+=(this.cla

  • js+CSS实现模拟华丽的select控件下拉菜单效果

    本文实例讲述了js+CSS实现模拟select控件的下拉菜单效果.分享给大家供大家参考.具体如下: 这是一个JS+CSS技术实现的Select控件效果,模拟出来的,比默认的Select更漂亮,有了这个模板,你修改Select就更方便了,由此你也可以将其制作成CSS下拉菜单,在兼容性方面暂未测试,在IE8下没问题. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-css-select-control-style-codes/ 具体代码如下:

  • js+css实现超简洁的二级下拉菜单效果代码

    本文实例讲述了js+css实现超简洁的二级下拉菜单效果代码.分享给大家供大家参考.具体如下: 这是一个很简洁的CSS+JavaScript二级菜单,没有使用过多的修饰素材,尽量不调用外部图片,简洁大方,而且便于二级开发完善,最初是一个政府网站上的菜单. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-css-simple-2jxl-menu-style-codes/ 具体代码如下: <!DOCTYPE html PUBLIC "-//

  • jQuery结合CSS制作漂亮的select下拉菜单

    我们在进行表单设计时,可能要用到select下拉选项控件,遗憾的是,IE浏览器默认的select控件外观非常丑陋,而且不能用样式来控制,不能在选项中添加图片等信息.今天我将通过实例来讲解如何用CSS和jQuery来制作漂亮的下拉选项菜单. XHTML <div id="dropdown"> <p>请选择城市</p> <ul> <li><a href="#">长沙</a></li

  • 纯css下拉菜单 无需js

    再来个今天某人说过的例子:纯css下拉菜单: 效果图 这个的实现很简单,主要是:hover和过渡属性transition的使用. 代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>css</title> <style> *{ margin: 0; padding:0; font-size

  • 用CSS实现下拉菜单的多种方法

    横向下拉菜单 横向下拉菜单 0? " ": "") + "sfhover"; } sfEls[i].onMouseDown=function() { this.className+=(this.className.length>0? " ": "") + "sfhover"; } sfEls[i].onMouseUp=function() { this.className+=(th

  • 支持IE6 IE7 Firefox 的纯CSS的下拉菜单

    纯CSS的下拉菜单 支持IE6 IE7 Firefox *{margin:0;padding:0;} .menu{font-size:12px;position:relative;z-index:100;} .menu ul{list-style:none;} .menu li {float:left;position:relative;} .menu ul ul {visibility:hidden;position:absolute;left:3px;top:23px;} .menu tab

  • 一个css与js结合的下拉菜单支持主流浏览器

    首先声明: 本人虽然在web前端岗位干了好多年,但无奈岗位对技术要求不高.html,css用的比较多,JavaScript自己原创的很少,基本都是copy修改,所以自己真正动手写时,发现基础很不牢固,边学习边实践,收获很大. 效果图: 不废话了,贴码了 1.css代码 复制代码 代码如下: a:link{color:white;text-decoration:none;} a:visited{color:white;text-decorative:none;} a:hover{color:whi

随机推荐