纯HTML+CSS编写动态下拉菜单

来源：互联网发布：淘宝手机店铺首页尺寸编辑：程序博客网时间：2024/04/28 07:29

怎样用纯html+css代码实现动态下拉菜单的实现？

先贴上html代码：

<!DOCTYPE html><html><head><title>下拉导航</title><meta http-equiv="content-type" content="text/html" charset="UTF-8"><link rel="stylesheet" type="text/css" href="nav.css"></head><body><div class="nav"><ul><li> <a href="#">项目1</a><ul><li><a href="#">A1</a></li>   /*这是下拉菜单的列表，下面一样*/<li><a href="#">A2</a></li><li><a href="#">A3</a></li><li><a href="#">A4</a></li><li><a href="#">A5</a></li><li><a href="#">A6</a></li></ul></li><li> <a href="#">项目2</a><ul><li><a href="#">B1</a></li><li><a href="#">B2</a></li><li><a href="#">B3</a></li><li><a href="#">B4</a></li><li><a href="#">B5</a></li><li><a href="#">B6</a></li></ul></li><li> <a href="#">项目3</a><ul><li><a href="#">C1</a></li><li><a href="#">C2</a></li><li><a href="#">C3</a></li><li><a href="#">C4</a></li><li><a href="#">C5</a></li><li><a href="#">C6</a></li></ul></li><li> <a href="#">项目4</a><ul><li><a href="#">D1</a></li><li><a href="#">D2</a></li><li><a href="#">D3</a></li><li><a href="#">D4</a></li><li><a href="#">D5</a></li><li><a href="#">D6</a></li></ul></li><li> <a href="#">项目5</a><ul><li><a href="#">E1</a></li><li><a href="#">E2</a></li><li><a href="#">E3</a></li><li><a href="#">E4</a></li><li><a href="#">E5</a></li><li><a href="#">E6</a></li></ul></li><li> <a href="#">项目6</a><ul><li><a href="#">F1</a></li><li><a href="#">F2</a></li><li><a href="#">F3</a></li><li><a href="#">F4</a></li><li><a href="#">F5</a></li><li><a href="#">F6</a></li></ul></li><li> <a href="#">项目7</a><ul><li><a href="#">G1</a></li><li><a href="#">G2</a></li><li><a href="#">G3</a></li><li><a href="#">G4</a></li><li><a href="#">G5</a></li><li><a href="#">G6</a></li></ul></li></ul></div></body></html>

那么，怎么实现默认状态下下拉菜单隐藏，鼠标移动状态下，下拉菜单出现（即每一个项目下的ul的隐藏和显示）？

接下来看css代码：

@charset "utf-8";/* CSS Document */.nav{width: 100%;margin: 0;}.nav ul{/*这里必须设置内边距和外边距，因为浏览器会给ul设定默认值，会把导航栏挤歪*/padding: 0;margin: 0;list-style: none;}.nav li{/*本来ul是竖直排列的，对所有li元素进行float:left他就会自动全部靠左*/float: left;position :relative;}.nav ul li a,.nav ul li a:hover {/*对所有项目a标签设置统一样式*/display: block;text-align: center;text-decoration: none;width: 184px;color: black;/*文字颜色 */border: 1px solid #fff;/*边框大小和颜色 */border-width: 1px 1px 0 0;/*四个边框的宽度 ,注意，左右边框没有像素哦，仔细看导航栏左右有缝隙*/background: #CCCCCC;/*背景颜色 */height：50px;line-height: 50px;/*这里将height和line-height设置为一样的高度文字就会水平竖直居中 */font-size: 17px;}.nav ul li:hover a {/*这是一个css伪类，将鼠标移上去的时候字体和背景都会变色，移开又会变回来 */color: #fff;background: #CCCCFF;}.nav ul li ul {/*这是实现下拉菜单隐藏的关键*/display: none;}.nav ul li:hover ul {/*这里就是弹出的下拉菜单了*/display: block;position: absolute;top: 51px;left: 0;width: 185px;}.nav ul li:hover ul li a {/*这里当然是定义下拉菜单里的a标签了*/display: block;background: #CCFFFF;color: #000;}.nav ul li:hover ul li a:hover {/*下拉菜单a标签的伪类设置*/background: #dfc184;color: #000;}

0 0