css写二级下拉菜单的方法:首先创建一个HTML示例文件;然后使用css的display属性控制二级下拉菜单的显示与否;最后通过浏览器查看运行效果即可。
本教程操作环境:Dell G3电脑、Windows7系统、Chrome76.0&&CSS3版本。
推荐:《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>
运行效果:
以上是css如何写二级下拉菜单的详细内容。更多信息请关注PHP中文网其他相关文章!