下拉菜单的制作无js
2021-06-27 12:06
标签：没有 重要 鼠标 样式 idt 技术分享 float tom one 下拉菜单有许多种制作方法； 今天我们就做最简单的一种； 话不多说先看html 这里用到的是一种嵌套的结构；这样不用定位也可以在list1的下方； 好了我们看下css *{margin:0px;padding:0px;} 这个是初使化； .menubox{margin:0 auto;width:800px;height:36px;} 这个是将导航菜单定 位在中间； .menubox>ul{width:100%;height:100%;} .list1{ width:200px;height:36px; float:left;list-style-type:none; font-size:18px;line-height:36px; font-weight:bolder; background:#F22765;text-align:center; } 设置list1的样式；垂直居中用lineheight=height;水平居中用：text:center; .list1:hover{background:#DE18CC} 设置鼠标放上去时的样式 .list1>a{text-decoration:none;color:#fff;} 设置list1下的a的样式；注意如果color在list1上设置是没有作用的；因为有a ；所以要在a 上设置字体颜色； .list2{width:200px;height:36px; font-size:14px;background:#F4D613; line-height: 36px;text-align:center; list-style-type:none;margin-bottom:2px; display:none; } 这个和list1几乎一样；但是这里多了一个display:none; 这个就是隐藏； .list2:hover{background:#F75839} 这个就不用讲了吧！ .list1:hover .list2{display:block;} 这个是最重要的；这个就是让鼠标放在list1上让list2显示和隐藏的； .list2>a{text-decoration:none;color:#6A5757;} 这个也不用讲了吧； 下拉菜单的制作无js 标签：没有 重要 鼠标 样式 idt 技术分享 float tom one 原文地址：http://www.cnblogs.com/521jiaoyu/p/7147201.html