纯css写的一个简单导航条

来源：互联网发布：全境封锁低配优化补丁编辑：程序博客网时间：2024/04/29 10:00

<strong><span style="font-size:18px;">nav.html:</span></strong>

<!doctype html><html lang="en"><head><meta charset="UTF-8"><title>a simple navigation</title><link rel="stylesheet" type="text/css" href="nav.css"></head><body><div id="nav"><ul><li><a href="#">首页</a></li><li><a href="#">公司产品</a><ul><li><a href="#">html</a></li><li><a href="#">css</a></li><li><a href="#">javascript</a></li><li><a href="#">php</a></li></ul></li><li><a href="#">公司服务</a></li><li><a href="#">股东投资</a></li><li><a href="#">联系方式</a></li></ul></div></body></html>

nav.css:

* {margin: 0px; padding: 0px; text-decoration: none;}#nav {font-size: 12px; width: 500px; height: 30px; border-bottom: 1px solid #000; margin: 20px auto;}/* ----- 初始状态 ----- */#nav ul {list-style: none;}#nav ul li {float: left; position: relative;}#nav ul li a {display: block; width: 100px; height: 20px; padding-top: 10px; text-align: center; background: #fff;}#nav ul li ul {display: none; position: absolute; border: 1px solid #000;}/* ----- 鼠标经过时让二级菜单显示 ------ */#nav ul li:hover ul, #nav ul li a:hover ul {display: block; border-top: 1px solid #fff;}#nav ul li a:hover {color: blue;}/* ------ 二级菜单本身状态属性 ------ */#nav ul li ul li {clear: both; text-align: center; font-size: 12px;}#nav ul li ul li a {display: block; width: 98px; height: 30px; padding-top: 5px; background: #fff;}#nav ul li ul li a:hover {color: red;}/* 注意几点：1.margin的前提：设置长宽2.padding不要跟line-height一起使用？3.注意写注释 */

0 0