css怎样写二级下拉菜单
发布时间:01/01 来源:未知 浏览:
关键词:
css写二级下拉菜单的办法:第一创立一个HTML示例文件;然后使用css的display属性操纵二级下拉菜单的显示与否;最后通过阅读器查看运转结果即可。
本教程操纵环境:Dell G3电脑、Windows7系统、Chrome76.0&&CSS3版本。
引荐:《css视频教程》
纯CSS实现二级导航下拉菜单
思想:
使用css的display属性操纵二级下拉菜单的显示与否。当鼠标移动到1级导航菜单的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="#">1级导航</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="#">1级导航</a> <ul> <li><a href="#">二级导航</a></li> <li><a href="#">二级导航</a></li> <li><a href="#">二级导航</a></li> </ul> </li> <li><a href="#">1级导航</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="#">1级导航</a> <ul> <li><a href="#">二级导航</a></li> <li><a href="#">二级导航</a></li> <li><a href="#">二级导航</a></li> </ul> </li> <li><a href="#">1级导航</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="#">1级导航</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="#">1级导航</a> <ul> <li><a href="#">二级导航</a></li> <li><a href="#">二级导航</a></li> </ul> </li> </ul> </nav> </div> </body> </html>
运转结果:
以上就是css怎样写二级下拉菜单的具体内容,更多请关注百分百源码网其它相关文章!