<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>企业搜索页面</title> <style> *{ margin:0; padding:0; } .nav{ margin-top:100px; width:100%; height:40px; background:#4aca6d; } .nav ul{ width:1200px; height:inherit; margin:0 auto; } .nav ul li{ width:188px; float:left; height:40px; line-height:40px; font-size:14px; text-align:center; color:#fff; list-style: none; cursor: pointer; } .nav ul li:hover{ width:188px; height:40px; background:#09a800; } .nav_question:hover .nav_item, .nav_select:hover .nav_item, .nav_uesr:hover .nav_item, .nav_feature:hover .nav_item{ display: block; } .nav_item{ width:100%; background-color: rgba(243,243,243,.95); display: none; } .nav_item p{ color:#999; } .nav_item a{ color:#999; text-decoration: none; } .nav_item a:hover{ color:#999; text-decoration: underline; } </style> </head> <body> <div class="nav"> <ul> <li>首页</li> <li class="nav_question"> 问题 <div class="nav_item"> <p><a href="">知道专栏</a></p> <p><a href="">知道非遗</a></p> <p><a href="">知道大数据</a></p> <p><a href="">知道大数据</a></p> </div> </li> <li class="nav_select"> 精选 <div class="nav_item"> <p><a href="">知道专栏</a></p> <p><a href="">知道非遗</a></p> <p><a href="">知道大数据</a></p> <p><a href="">知道大数据</a></p> </div> </li> <li class="nav_uesr"> 用户 <div class="nav_item"> <p><a href="">知道专栏</a></p> <p><a href="">知道非遗</a></p> <p><a href="">知道大数据</a></p> <p><a href="">知道大数据</a></p> </div> </li> <li class="nav_feature"> 特色 <div class="nav_item"> <p><a href="">知道专栏</a></p> <p><a href="">知道非遗</a></p> <p><a href="">知道大数据</a></p> <p><a href="">知道大数据</a></p> </div> </li> </ul> </div> </body> </html>
纯css实现二级导航
最新推荐文章于 2022-04-25 16:28:02 发布