css三级菜单效果
一个简单实用的css三级菜单效果
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>css实现三级菜单</title>
<style type="text/css">
*{margin:0;padding:0}
ul{list-style:none}
a{text-decoration:none}
body{font-size:16px}
.nav{width:100%;height:40px;line-height:40px;background:#333}
.container{width:1000px;margin:0px auto}
.nav li{float:left;position:relative}
.nav li a{float:left;width:100px;text-align:center;height:40px;color:#fff}
.nav li ul{width:100%;background:#fff;position:absolute;left:0px;top:40px;display:none}
.nav li li{float:none}
.nav li li a{float:none;display:inline-block}
.nav li li a{color:#333}
.nav li ul li ul{left:100px;top:0px}
.nav li:hover{background:red}
.nav li:hover>ul{display:block}
.banner img{width:100%}
</style>
</head>
<body>
<div id="nav" class="nav">
<div class="container">
<ul>
<li><a href="#">home</a></li>
<li>
<a href="#">javascript</a>
<ul>
<li><a href="#">css</a></li>
<li>
<a href="#">html5</a>
<ul>
<li><a href="#">angular.js</a></li>
<li><a href="#">node.js</a></li>
<li><a href="#">vue.js</a></li>
<li><a href="#">React</a></li>
</ul>
</li>
<li><a href="#">jQuery</a></li>
<li><a href="#">backbone</a></li>
</ul>
</li>
<li>
<a href="#">editor</a>
<ul>
<li><a href="#">Sublime Text</a></li>
<li><a href="#">Atom</a></li>
<li><a href="#">Dreamweaver</a></li>
<li><a href="#">HBuilder</a></li>
</ul>
</li>
<li><a href="#">about us</a></li>
<li><a href="#">Contact us</a></li>
</ul>
</div>
</div>
<div class="img">
<img src="data:image/1.jpg" alt="">
</div>
</body>
</html>
css三级菜单效果的更多相关文章
- 可以兼容ie6的纯CSS三级鼠标悬停显示/隐藏菜单实现
本来在chrome上用js写的好好的三级显隐菜单,放到ie6上一测试竟然奇葩般的会瞎闪.问题原因至今没参透,可能是我每次响应事件的处理代码过长??总之我是对ie6幻灭了,去网上搜一搜能支持ie6的下拉 ...
- CSS实现三级菜单[转]
头部导航条布局 html代码: <!DOCTYPE html> <html> <head> <meta charset="utf-8"&g ...
- HTML+CSS实现简单三级菜单
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- html/css 实现下拉菜单效果
demo.html <!DOCTYPE html> <html lang="en"> <head> <meta charset=" ...
- 纯css制作三级菜单
<!DOCTYPE html> <html> <head> <title>三级菜单</title> <meta charset=&qu ...
- 夜深了,写了个JQuery的省市区三级级联效果
刚刚练手的JQuery,希望大神们指正 主要实现以下功能: 1.三级菜单级联加载数据 2.可以在不操作脚本的情况下,给元素加属性实现级联功能 3.自定义动态显示数据 咨询问题: 对于一般比较固定不变的 ...
- 学习CSS制作菜单列表,举一反三
1.普通的二三级菜单 <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type&qu ...
- [C#]使用 C# 代码实现拓扑排序 dotNet Core WEB程序使用 Nginx反向代理 C#里面获得应用程序的当前路径 关于Nginx设置端口号,在Asp.net 获取不到的,解决办法 .Net程序员 初学Ubuntu ,配置Nignix 夜深了,写了个JQuery的省市区三级级联效果
[C#]使用 C# 代码实现拓扑排序 目录 0.参考资料 1.介绍 2.原理 3.实现 4.深度优先搜索实现 回到顶部 0.参考资料 尊重他人的劳动成果,贴上参考的资料地址,本文仅作学习记录之用. ...
- CSS导航菜单水平居中的多种方法
CSS导航菜单水平居中的多种方法 在网页设计中,水平导航菜单使用是十分广泛的,在CSS样式中,我们一般会用Float元素或是「display:inline-block」来解决.而今天主要讲解如何让未知 ...
随机推荐
- Java:方法的参数是传值还是传引用
Java中方法的参数总是采用传值的方式. 下列方法欲实现对象的交换,但实际上是不能实现的. public void swap(simpleClass a,simpleClass b){ simpleC ...
- android初练二
android 之 Activity的启动方式 1.android的显示启动 显示启动一般用于在用自己的活动时进行页面跳转时常常使用到 public class MainActivity extend ...
- 建表过程-列名&列类型&修改表B
怎么建表? 主键 名称 重量 价格 生产日期 保质期 产地 种类 分析:我们只要把第一行的表头建好后,这张表也就完成了. 术语:建表的过程就是声明字段过程 ...
- css清除浮动大全共8种方法
原文链接http://www.jb51.net/css/173023.html 清除浮动是每一个 web前台设计师必须掌握的机能.css清除浮动大全,共8种方法. 浮动会使当前标签产生向上浮的效果,同 ...
- 401 - 未授权:由于凭据无效,访问被拒绝”在iis的解决办法
1.打开"IIS信息服务管理器"-->选择你发布的网站-->选择功能视图中的"身份验证"-->右键匿名身份验证,选择"编辑" ...
- 如何生成git的公钥和私钥
转载地址:http://blog.csdn.net/wqjsir/article/details/17386087 一. Git windows 客服端(MsysGit)下载 下载地址:http:// ...
- Ajax文件上传
- 【Java EE 学习 70 上】【数据采集系统第二天】【数据加密处理】【登陆验证】【登陆拦截器】【新建调查】【查询调查】
一.数据加密处理 这里使用MD5加密处理,使用java中自带加密工具类MessageDigest. 该类有一个方法digest,该方法输入参数是一个字符串返回值是一个长度为16的字节数组.最关键的是需 ...
- DTMF三种模式(SIPINFO,RFC2833,INBAND)
转自:http://www.tuicool.com/articles/n6Vb2iJ 1.DTMF(双音多频)定义:由高频音和低频音的两个正弦波合成表示数字按键(0~9 * # A B C D). 2 ...
- C# DM5 32位加密
using System.Security.Cryptography;using System.Text; public static string StringToMD5Hash(string in ...