悬浮左侧导航栏html,js + css实现左侧悬浮导航栏
body {
font: normal 11px verdana;
}
ul {
margin: 0;
padding: 0;
list-style: none;
width: 150px; /* Width of Menu Items */
border-bottom: 1px solid #ccc;
}
ul li {
position: relative;
}
li ul {
position: absolute;
left: 149px; /* Set 1px less than menu width */
top: 0;
display: none;
}
/* Styles for Menu Items */
ul li a {
display: block;
text-decoration: none;
color: #777;
background: #fff; /* IE6 Bug */
padding: 5px;
border: 1px solid #ccc;
border-bottom: 0;
}
/* Fix IE. Hide from IE Mac /*/
* html ul li { float: left; height: 1%; }
* html ul li a { height: 1%; }
/* End */
ul li a:hover { color: #E2144A; background: #f9f9f9; } /* Hover Styles */
li ul li a { padding: 2px 5px; } /* Sub Menu Styles */
li:hover ul, li.over ul { display: block; } /* The magic */
-->
font: normal 11px verdana;
}
ul {
margin: 0;
padding: 0;
list-style: none;
width: 150px; /* Width of Menu Items */
border-bottom: 1px solid #ccc;
}
ul li {
position: relative;
}
li ul {
position: absolute;
left: 149px; /* Set 1px less than menu width */
top: 0;
display: none;
}
/* Styles for Menu Items */
ul li a {
display: block;
text-decoration: none;
color: #777;
background: #fff; /* IE6 Bug */
padding: 5px;
border: 1px solid #ccc;
border-bottom: 0;
}
/* Fix IE. Hide from IE Mac /*/
* html ul li { float: left; height: 1%; }
* html ul li a { height: 1%; }
/* End */
ul li a:hover { color: #E2144A; background: #f9f9f9; } /* Hover Styles */
li ul li a { padding: 2px 5px; } /* Sub Menu Styles */
li:hover ul, li.over ul { display: block; } /* The magic */
style="left: 10; position: absolute; top: 94; z-index: 5; width: 221; height: 293">
- 网站首页
- 网页特效
- 广告代码
- 您自定义
- 您自定义
- 您自定义
- 您自定义
- 您自定义
- 您自定义
- 您自定义
- 您自定义
- 您自定义
- 您自定义
- 您自定义
悬浮左侧导航栏html,js + css实现左侧悬浮导航栏相关推荐
- html中 导航条置顶的代码6,JS+CSS实现六级网站导航主菜单效果
本文实例讲述了JS+CSS实现六级网站导航主菜单效果.分享给大家供大家参考.具体如下: 这是一款JS+CSS实现支持6级的网站导航主菜单,级级相信够大家用了,外观蓝色风格,也是使用最多的一种菜单颜色, ...
- php侧边栏导航效果,原生js实现电商侧边导航效果
知识要点 实现原理: 1.点击楼层跳相应楼层,用的是锚点定位 电梯:2F 个护家清 列表title: 这个没什么好说的 2.当点击楼层跳到相应楼层时,该楼层高亮显示 我们的脚本主要就是实现这个功能. ...
- html 窗口左边悬浮ul,js + css实现左侧悬浮导航栏
浮在页面上的导航菜单 body { font: normal 11px verdana; } ul { margin: 0; padding: 0; list-style: none; width: ...
- 采用CSS+JS实现简洁的滑动导航栏_网页代码站(www.webdm.cn)
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.or ...
- 使用 HTML/CSS 实现 Educoder 顶部导航栏
第1关:使用flex布局实现Educoder顶部导航栏容器布局 任务描述 本关任务:使用flex布局实现容器两端对齐的效果. 效果如下: 相关知识 使用flex布局实现左右分开布局的方式有多种: 使用 ...
- Html+Css+jQuery左侧导航菜单三级联动
Html部分 <!DOCTYPE html> <html> <head> <meta charset="utf-8" ...
- CSS实现垂直/水平导航栏
文章目录 一级基本导航栏 怎么显示?导航栏 = 链接列表 垂直导航栏 水平导航栏 二级导航栏 垂直二级 水平二级 动画效果 考虑导航栏位置和导航栏下方内容位置 行内元素和块级元素的具体区别是什么?in ...
- php 3d animation,CSS_纯CSS实现菜单、导航栏的3D翻转动画效果,我曾经向大家展示过闪光的logo - phpStudy...
纯CSS实现菜单.导航栏的3D翻转动画效果 我曾经向大家展示过闪光的logo,燃烧的火狐狸,多重嵌套动画等例子,今天,我们将要制作一个简单但非常酷的3D翻转菜单.大家可以先看看实际效果,下面有效果截图 ...
- 【荐】自己做一款不错的JS+CSS多级导航菜单
代码简介: 自己做一款不错的二级导航菜单,黑色风格,是根据仿淘宝支付宝菜单而做的,自我感觉还算行吧. 代码内容: <!DOCTYPE HTML PUBLIC "-//W3C//DTD ...
最新文章
- Bert需要理解的一些内容
- 2.1顺序表(链表)
- spring启动过程之源码跟踪(上)--spring Debug
- qt android oci数据库,QT mysql SQLite 数据库支持
- html绘制波形图,JS实现波形图
- content的定义
- 2×3卡方检验prism_戏说卡方检验
- 理解JVM(五):Java内存模型与线程
- 基于Python将图片转换成素描图片
- 电脑图片格式怎么批量转换jpg?几个小妙招轻松转换
- 【串口服务器】的桥接模式
- 开机动画desc.txt描述文件的分析
- 怎么让maillog日志记录smtp是使用25端口还是465端口(SSL加密方式)
- excel清单数据导入到开票软件中进行开票
- 【AICG】动漫女主AI绘图的学习笔记
- 经验总结:青春豆的治疗方法
- Tensorflow深度学习之二十五:tf.py_func
- AVEVA .Net 1.Introduction
- 浅谈羽毛球战术及战术练习[入门必读]
- 什么是贷款服务费?房屋中介收取合理吗?