放在网页左侧的DIV+CSS隐藏菜单代码- www.webdm.cn

body {

background: #fff;

font-family: "Lucida Grande", Helvetica, Arial, sans-serif;

font-size: 12px;

}

.menu {position:absolute; z-index:100; margin-top:20px;}

.menu ul {padding:0; margin:0; list-style-type: none; height:170px;}

.menu ul li {width:35px; text-align:left;}

* html .menu ul li {width:235px; margin-left:-16px; mar\gin-left:0;}

.menu ul li a, .menu ul li a:visited {display:block; text-decoration:none; width:15px; padding:10px; background:transparent url(http://www.webdm.cn/images/20090920/tab1.gif) top right; height:80px; text-align:center; border-left:1px solid #000;}

* html .menu ul li a, * html .menu ul li a:visited {width:35px; height:100px; w\idth:15px; he\ight:80px;}

table {margin:0; padding:0; border:0; border-collapse:collapse;font-size:1em;}

.menu ul li ul {visibility:hidden; position:absolute; width:190px; top:0; left:0;}

.menu ul li:hover {position:relative;}

.menu ul li:hover a {padding-left:200px;}

.menu ul li a:hover {padding-left:201px; position:relative; z-index:200; border-left:0;}

.menu ul li:hover ul,

.menu ul li a:hover ul {visibility:visible; z-index:300;}

/* / */

.menu ul li:hover ul li a,

.menu ul li a:hover ul li a {display:block; background:#d8e2e2 url(http://www.webdm.cn/images/20090920/fade.gif); color:#888; text-align:left; height:auto; padding:5px; border:1px solid #000; border-width:1px 1px 0 1px; width:190px; w\idth:180px;}

.menu ul li:hover ul li a.last,

.menu ul li a:hover ul li a.last {border-bottom:1px solid #000;}

.menu ul li:hover ul li a:hover,

.menu ul li a:hover ul li a:hover {background:#e8f2f2; color:#000;}

.some_text {padding:0 20px 0 50px;}

  • D E M O S

    • zero dollars advertising page
    • wrapping text around images
    • styled form
    • active focus
    • shadow boxing
    • image map for detailed information
    • fun with background images
    • fade scrolling
    • em image sizes compared
  • B O X E S
    • a coded list of spies
    • vertical menu
    • enlarging unordered list
    • link images
    • non-rectangular
    • jigsaw links
    • circular links

网页代码站 - 最专业的代码下载网站 - 致力为中国站长提供有质量的代码!

css+隐藏+左侧菜单栏,放在网页左侧的DIV+CSS隐藏菜单代码相关推荐

  1. HTML5+CSS期末大作业:环保网站设计——环境保护(10页) 含设计报告 HTML+CSS+JavaScript 静态HTML环境保护网页制作下载 DIV+CSS环保网页设计代码

    HTML5+CSS期末大作业:宠物网站设计--宠物猫(10页) 含设计报告 HTML+CSS+JavaScript 大学生简单个人静态HTML网页设计作品 DIV+CSS宠物网页设计代码 常见网页设计 ...

  2. Photoshop图象切片保存为网页HTML(DIV+CSS布局)的方法

    Photoshop图象切片保存为网页HTML(DIV+CSS布局)的方法 首先,制作图象切片(以一张图片为例子) 一.选择"切片"工具,在图像上拖动以分割图像(例如:一张图像切割2 ...

  3. 大熊猫学生网页设计模板 静态HTML动物保护学生网页作业成品 DIV CSS大熊猫野生动物主题静态网页

    网页介绍 本学生网页主题为介绍大熊猫形态特征.栖息环境.生活习性等,采用DIV CSS布局,共4个页面. 样式方面整体网页内容区宽度为1200PX,使用CSS设置了网页背景图,导航部分制作了鼠标经过及 ...

  4. 基本网页布局(DIV+CSS)

    基本网页布局 目录 基本网页布局 一.盒子模型(网页布局的基础) 二.DIV+CSS进行网页布局 三.布局中的常用属性 四.使用DIV+CSS进行布局时要注意的问题: 一.盒子模型(网页布局的基础) ...

  5. css背景上能添加文字,如何利用div+css来给背景图片上文字布局

    这段时间设计了一个专题页面,上传到网站上去,打开这个网页一看,问题来了,这网页只是一个图片,没有文字,在后台添加的时候才知道只能在图片的下面显示文字. 我想到了可以将图片设为背景,然后在上面添加问题, ...

  6. html隐藏块元素过度动画,CSS3实现DIV图层隐藏到显示的过渡效果

    本文介绍CSS3实现DIV图层隐藏到显示的过渡效果,可用于产品列表的产品简介过渡显示与隐藏等,希望对你有所帮助. CSS3的transition过渡属性对于页面元素的显隐并没有提供过渡方法!所以DIV ...

  7. 使用DIV+CSS布局设计个人主页 设计个人主页,使用DIV+CSS的方式进行页面布局。

    (1)构思个人主页的版面布局: (2)使用DIV+CSS技术设计出构思好的个人主页. 先来看看效果: <!DOCTYPE html> <html lang="zh" ...

  8. html的左侧菜单栏,HTML 之 左侧菜单

    代码 Title .item .header{ height: 35px; background-color: #2459a2; color: white; line-height: 35px; } ...

  9. 怎么修改网页边框html,DIV+CSS网页布局之边框的设置方法

    CSS Borders 边框 边框可以运用到body里的大部分HTML元素. 制作一个元素的边框,你需要border-style边框样式.值可以是: solid, dotted, dashed, do ...

最新文章

  1. eclipse 代码中突然出现特殊字符
  2. 如何写一个通用的README规范
  3. HTML5 标签、事件句柄属性以及浏览器兼容情况速查手册
  4. Codeforces 862D. Mahmoud and Ehab and the binary string 【二分】(交互)
  5. blasphemy - 题解
  6. Centos下安装minikube
  7. 补丁生成与应用工具 V1.5.4
  8. [病毒木马] LSP劫持
  9. java getbytes 乱码_深入解析java String中getBytes()的编码问题
  10. box-sizing失效的原因
  11. Microbiome | 黄海所陈松林院士/华科宁康等-肠道菌群在龙利鱼(半滑舌鳎)抗弧菌病性状形成中的机制...
  12. 品荔枝赏文化,美丽乡村不一样的嘉年华
  13. python矩阵对角化_大矩阵对角化python
  14. 高频电源模块FB230D10NZ-D浮充模块充电机
  15. ToG产品_产品白皮书框架_2019_003
  16. php弹幕,PHP直播源码,实现简单弹幕效果
  17. FPGA底层资源之CLB详解
  18. HTTP协议6-HTTP内容类型
  19. osg学习(三十一)osg、Qt的image
  20. 群联AI云防护的优势所在

热门文章

  1. transform 遇上 position: fixed
  2. 自定义控件只允许输入Decimal和int类型字符串
  3. Flutter开发-iOS报错Trying to embed a platform view but the PrerollContext does not s
  4. Java LinkedList指南
  5. C#的常见算法(面试)(转)
  6. Windows服务启动进程----Cjwdev.WindowsApi.dll
  7. 读书笔记—写给大家看的PPT设计书
  8. [LeetCode]Count of Range Sum
  9. ecshop $user
  10. 51nod 1766