CSS 如何制作下拉菜单? 下面本篇文章给大家介绍一下用纯 CSS 实现下拉菜单的几种方式. 有一定的参考价值, 有需要的朋友可以参考一下, 希望对大家有所帮助.
方法 1:display:none 和 display:block 切换
- <!DOCTYPE html>
- <HTML>
- <head>
- <meta charset="UTF-8">
- <title>
- Document
- </title>
- <style>
- ul{ list-style: none; } .nav>li{ float: left; } ul a{ display: block;
- text-decoration: none; width: 100px; height: 50px; text-align: center;
- line-height: 50px; color: white; background-color: #2f3e45; } .nav>li:first-child
- a{ border-radius: 10px 0 0 10px; } .nav>li:last-child a{ border-radius:
- 0 10px 10px 0; } .drop-down{ /*position: relative;*/ } .drop-down-content{
- padding: 0; display: none; /*position: absolute;*/ } h3{ font-size: 30px;
- clear: both; } .drop-down-content li:hover a{ background-color:red; } .nav
- .drop-down:hover .drop-down-content{ display: block; }
- </style>
- </head>
- <body>
- <ul>
- <li>
- <a href="#">
- 下拉菜单
- </a>
- </li>
- <li>
- <a href="#">
- 下拉菜单
- </a>
- <ul>
- <li>
- <a href="#">
- 我是 1
- </a>
- </li>
- <li>
- <a href="#">
- 我是 2
- </a>
- </li>
- <li>
- <a href="#">
- 我是 3
- </a>
- </li>
- </ul>
- </li>
- <li>
- <a href="#">
- 下拉菜单
- </a>
- </li>
- <li>
- <a href="#">
- 下拉菜单
- </a>
- </li>
- <li>
- <a href="#">
- 下拉菜单
- </a>
- </li>
- </ul>
- <h3>
- 我是测试文字
- </h3>
- </body>
- </HTML>
这是首先考虑到的实现方法, 给 .drop-down-content 添加 display:none, 当悬浮在. drop-down 上时 .drop-down-content 的 display 变成 block, 缺点是不能添加过渡属性, 慢慢弹出下来菜单. 当. drop-down-content 显示时会把后面的盒子往下挤, 因为. drop-down-content 显示时是存在于文档流中的, 给. drop-down 设置 position:relative,.drop-down-content 设置 position:absolute, 使下拉菜单脱离了文档流来解决, 上面注释的地方改过来即可
方法 2: 给下拉菜单设置固定的高度, 下拉菜单的内容设置透明 opacity: 0;, 悬浮在下拉菜单时 opacity: 1; 来实现
- <style>
- ul{
- list-style: none;
- }
- .nav>li{
- float: left;
- }
- ul a{
- display: block;
- text-decoration: none;
- width: 100px;
- height: 50px;
- text-align: center;
- line-height: 50px;
- color: white;
- background-color: #2f3e45;
- }
- .nav>li:first-child a{
- border-radius: 10px 0 0 10px;
- }
- .nav>li:last-child a{
- border-radius: 0 10px 10px 0;
- }
- .drop-down{
- /*position: relative;*/
- height: 50px;
- }
- .drop-down-content{
- padding: 0;
- opacity: 0;
- /*position: absolute;*/
- }
- h3{
- font-size: 30px;
- clear: both;
- /* position: relative;
- z-index: -1;*/
- }
- .drop-down-content li:hover a{
- background-color:red;
- }
- .nav .drop-down:hover .drop-down-content{
- opacity: 1;
- }
- </style>
效果同上.
方法 3: 设置包裹下拉菜单的 li 元素 position:relation; 下拉菜单绝对定位, left:-999px; 使下拉菜单跑到左边浏览器外面看不到的地方, 悬浮时, left:0; 使其出现在浏览器中显示.
- <style>
- ul{
- list-style: none;
- }
- .nav>li{
- float: left;
- }
- ul a{
- display: block;
- text-decoration: none;
- width: 100px;
- height: 50px;
- text-align: center;
- line-height: 50px;
- color: white;
- background-color: #2f3e45;
- }
- .nav>li:first-child a{
- border-radius: 10px 0 0 10px;
- }
- .nav>li:last-child a{
- border-radius: 0 10px 10px 0;
- }
- .drop-down{
- position: relative;
- }
- .drop-down-content{
- padding: 0;
- position: absolute;
- left: -999px;
- }
- h3{
- font-size: 30px;
- clear: both;
- }
- .drop-down-content li:hover a{
- background-color:red;
- }
- .nav .drop-down:hover .drop-down-content{
- left: 0;
- }
- </style>
方法 4: 使用绝对定位
- /*HTML 结构, 以下四种方法通用 */
- <div id="container">
- <ul id="con_ul" class="cleanfix">
- <li > 首页 </li>
- <li > 关于我们 </li>
- <li>
新闻中心
- <ul id="drop">
- <li><a href=""> 最新动态 </a></li>
- <li><a href=""> 视频中心 </a></li>
- <li><a href=""> 媒体报道 </a></li>
- <li><a href=""> 热点专题 </a></li>
- <li><a href=""> 媒体资料库 </a></li>
- </ul>
- </li>
- <li > 苏宁产业 </li>
- <li > 社会责任 </li>
- <li > 联系我们 </li>
- </ul>
- </div>
- /* 主要 CSS 代码 (其他部分和上边一样)*/
- #con_ul> li{
- float: left;
- height: 50px;
- width:100px;
- line-height: 50px;
- text-align: center;
- position: relative;
- }
- #drop{
- width: 120px;
- height:auto;
- position: absolute;
- left:-800px;
- }
- #con_ul> li:nth-child(3):hover #drop{
- left:auto;
- }
分析: 首先给下拉菜单的父元素 li 设置一个 relative 的 position, 将下拉菜单整体进行绝对定位, left 为负值将下拉菜单偏出 HTML 结构显现不出来, 之后在 hover 伪类中将 left 设置为 auto, 鼠标移动到 li 时会使下拉菜单与同级元素进行自动定位达到左端对齐的效果.(left:0 也可以.)
更多 web 前端开发 https://www.html.cn/ 知识, 请查阅 HTML 中文网 !!
来源: http://www.css88.com/qa/css3/17674.html