CSS 如何写二级下拉菜单? 下面本篇文章给大家介绍一下. 有一定的参考价值, 有需要的朋友可以参考一下, 希望对大家有所帮助.
纯 CSS 实现二级导航下拉菜单
思想:
使用 CSS 的 display 属性控制二级下拉菜单的显示与否. 当鼠标移动到一级导航菜单的 li 标签时, 显示二级导航菜单的 ul 标签. 由于实现起来比较简单, 所以在这里直接给出了参考代码.
纯 CSS 二级导航下拉菜单代码
- <!DOCTYPE html>
- <HTML>
- <head>
- <meta charset="UTF-8" content="text/html" http-equiv="content-type">
- <title > 纯 CSS 二级导航下拉菜单 </title>
- <meta name="keyword" content="关键字">
- <meta name="description" content="描述">
- <style type="text/css">
- *{margin: 0;padding: 0;}
- #bg{background: red;width: 100%;height: 35px;}
- nav{height: 35px;width: 1000px;margin: 0 auto;}
- nav ul li{list-style-type:none;float: left}
- nav ul li a{ text-decoration: none;display: block;width: 130px;line-height: 35px;
text-align: center;color:white;font-fimily: 微软雅黑;}
- nav ul li ul li{float: none}
- nav ul li ul li a{color:black}
- nav ul li ul{display: none;}
- nav ul li:hover ul{display: block;}
- </style>
- </head>
- <body>
- <div id="bg">
- <nav>
- <ul>
- <li><a href="#"> 一级导航 </a>
- <ul>
- <li><a href="#"> 二级导航 </a></li>
- <li><a href="#"> 二级导航 </a></li>
- <li><a href="#"> 二级导航 </a></li>
- <li><a href="#"> 二级导航 </a></li>
- </ul>
- </li>
- <li><a href="#"> 一级导航 </a>
- <ul>
- <li><a href="#"> 二级导航 </a></li>
- <li><a href="#"> 二级导航 </a></li>
- <li><a href="#"> 二级导航 </a></li>
- </ul>
- </li>
- <li><a href="#"> 一级导航 </a>
- <ul>
- <li><a href="#"> 二级导航 </a></li>
- <li><a href="#"> 二级导航 </a></li>
- <li><a href="#"> 二级导航 </a></li>
- <li><a href="#"> 二级导航 </a></li>
- </ul>
- </li>
- <li><a href="#"> 一级导航 </a>
- <ul>
- <li><a href="#"> 二级导航 </a></li>
- <li><a href="#"> 二级导航 </a></li>
- <li><a href="#"> 二级导航 </a></li>
- </ul>
- </li>
- <li><a href="#"> 一级导航 </a>
- <ul>
- <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><a href="#"> 一级导航 </a>
- <ul>
- <li><a href="#"> 二级导航 </a></li>
- <li><a href="#"> 二级导航 </a></li>
- <li><a href="#"> 二级导航 </a></li>
- <li><a href="#"> 二级导航 </a></li>
- </ul>
- </li>
- <li><a href="#"> 一级导航 </a>
- <ul>
- <li><a href="#"> 二级导航 </a></li>
- <li><a href="#"> 二级导航 </a></li>
- </ul>
- </li>
- </ul>
- </nav>
- </div>
- </body>
- </HTML>
运行效果:
更多前端开发 https://www.html.cn/ 知识, 请查阅 HTML 中文网 !!
来源: http://www.css88.com/qa/css3/17140.html