导航下拉菜单 html/css
2016-05-30 23:42
519 查看
不使用js
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" type="text/css" href="show.css"/>
</head>
<body>
<nav>
<ul id="first">
<li class="one"><a href="">選單 1</a>
<ul>
<li class="two">
<a href="">選單 1-1</a>
<ul>
<li class="three"><a href="">選單 1-1-1</a></li>
<li class="three"><a href="">選單 1-1-2</a></li>
</ul>
</li>
<li class="two"><a href="">選單 1-2</a>
<ul>
<li class="three"><a href="">選單 1-2-1</a></li>
<li class="three"><a href="">選單 1-2-2</a></li>
</ul></li>
<li class="two"><a href="">選單 1-3</a></li>
</ul>
<li class="one">
<a href="">選單 2</a>
<ul>
<li class="two">
<a href="">選單 2-1</a>
<ul>
<li class="three"><a href="">選單 2-1-1</a></li>
<li class="three"><a href="">選單 2-1-2</a></li>
</ul>
</li>
<li class="two"><a href="">選單 2-2</a></li>
<li class="two"><a href="">選單 2-3</a></li>
</ul>
<li class="one"><a href="">選單 3</a>
<ul>
<li class="two">
<a href="">選單 3-1</a>
<ul>
<li class="three"><a href="">選單 3-1-1</a></li>
<li class="three"><a href="">選單 3-1-2</a></li>
</ul>
</li>
<li class="two"><a href="">選單 3-2</a></li>
<li class="two"><a href="">選單 3-3</a></li>
</ul>
<li class="one"><a href="">選單 4</a>
<ul>
<li class="two">
<a href="">選單 4-1</a>
<ul>
<li class="three"><a href="">選單 4-1-1</a></li>
<li class="three"><a href="">選單 4-1-2</a></li>
</ul>
</li>
<li class="two"><a href="">選單 4-2</a></li>
<li class="two"><a href="">選單 4-3</a></li>
</ul>
</li>
</ul>
</nav>
</body>
</html>
li{ background:blue; width:100px; height:50px; line-height: 50px; list-style: none; position:relative; text-align:center; border:0.1px white solid; } li:hover{ background: lightblue; } a{ color:white; font-size:20px; text-decoration: none; } .one{ display:inline-block; } ul{ display:none; } #first{ display: block; } li.one:hover >ul{ display:block; position:absolute; left:-40px; top:100%; } li.two:hover >ul{ display:block; position:absolute; left:60%; top:0px; }
相关文章推荐
- Web布局连载——两栏固定布局(五)
- [div+css]晒晒最新制作专题推广页模板
- html5 web数据存储
- SEO
- 盒子模型
- CSS选择器
- CSS样式优先权
- [css] line-height 百分比单位和数值单位的区别
- 异步流程控制:7 行代码学会 co 模块
- [译] React 入门
- Apple官网研究之使用Justify布局导航
- 关于前端的思考与感悟
- rem : web app适配的秘密武器
- 如何优雅处理前端异常?
- 设计更快的网页(三):字体和 CSS 调整
- 纯CSS制作的新闻网站中的文章列表
- 10条影响CSS渲染速度的写法与使用建议第1/3页
- BS项目中的CSS架构_仅加载自己需要的CSS