html imitation Baidu Encyclopedia Navigation drop-down menu function

Author：Eve Cole Update Time：2025-04-14 14:16:01

html imitates Baidu Encyclopedia navigation drop-down menu function, the specific code is as follows:

Demo Figure 1

 <!DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Transitional//EN http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd><html xmlns=http://www.w3.org/1999/xhtml><head><meta http-equiv=Content-Type content=text/html; charset=utf-8 /><title>html+CSS imitation Baidu Encyclopedia Navigation drop-down menu</title><link href=css/style.css rel=stylesheet type=text/css /></head><body><div class=header> <div class=top-bar> Head content</div> <div class=nav-bar> <div class=nav-bg> <div class=nav-top> <div class=nav-content> <ul class=nav-content-box> <li class=index on> <span><a href=#>Home</a></span> </li> <li class=cat> <span><a href=#>Classification</a></span> <ul> <li><a href=#>Nature</a></li> <li><a href=#>Culture</a></li> <li><a href=#>Geography</a></li> <li><a href=#>Geography</a></li> <li><a href=#>History</a></li> <li><a href=#>Life</a></li> <li><a href=#>Society</a></li> <li><a href=#>Art</a></li> <li><a href=#>People</a></li> <li><a href=#>Economic</a></li> <li><a href=#>Technology</a></li> <li><a href=#>Sports</a></li> </li> </li> <li><a href=#>Sports</a></li> </li> </li> <li><a href=#>Sports</a></li> </li> <li><a href=javascript:void(0)>Featured Encyclopedia</a></span> <ul> <li><a href=#>Today in History</a></li> <li><a href=#>Digital Museum</a></li> <li><a href=#> href=#>City Encyclopedia</a></li> <li><a href=#>University Encyclopedia</a></li> <li><a href=#>Art Encyclopedia</a></li> <li><a href=#>Science Encyclopedia</a></li> </li> </li> <li><a href=#>Science Encyclopedia</a></li> </li> </li> <li><a href=javascript:void(0)>Users</a></span> <ul> <li><a href=#>Tailpole Group</a></li> <li><a href=#>Dream Burning Plan</a></li> <li><a href=#>Encyclopedia Task</a></li> <li><a href=#>Encyclopedia Mall</a></li> </li> </li> <li class=cooperation> <span><a href=#>Encyclopedia Mall</a></li> </li> </li> <li class=cooperation> <span><a href=#>Encyclopedia Mall</a></li> </li> </li> <li class=cooperation> <span><a href=javascript:void(0)>authoritative cooperation</a></span> <ul> <li><a href=#>Cooperation model</a></li> <li><a href=#>FAQ</a></li> <li><a href=#>Contact information</a></li> </li> </li> </li> <li><a href=#>Contact information</a></li> </li> </li> </li> <li class=mobile> <span><a href=javascript:void(0)>Mobile Encyclopedia</a></span> <ul> <li><a href=#>Client</a></li> <li><a href=#>Web version</a></li> </li> </li> </li> </ul> </div> </div> </div> </div> </div> </div></div></body></html>

style

 body{margin:0;padding:0;font-family:arial,tahoma,'Microsoft Yahei','/5b8b/4f53',sans-serif;;} .top-bar{background-color:#f3f3f3;text-align:center;padding:2.5em;}a{padding-bottom:3px;color:white;text-decoration:none;}ul{list-style:none;padding:0;margin:0;}li{text-align:center;} .nav-bar{position:relative;z-index:1000;overflow:hidden;min-width:900px;height:45px;}.nav-bar:hover{overflow:visible;-webkit-transition:all 0.5s ease;transition:all 0.5s ease;}.nav-bg{position:absolute;width:100%;height:272px;background:#24619c;background:rgba(36,97,158,.95);-webkit-transition:.3s;transition:.3s;z-index:9999;}.nav-top{height:43px;border-top:1px solid #5895d5;border-bottom:1px solid #3b92e9;background:#459df5;}.nav-content{position:absolute;width:80%;left:10%;}.nav-content-box{position:absolute;top:0;left:0;width:100%;}.nav-content-box>li{float:left;line-height:43px;}.nav-content-box>li:hover{background:#19508b;}.nav-content-box>li>span>a{display :block;width:100%;margin:0;height:41px;line-height:41px;}.nav-content-box>li:hover>span>a{background:#338ce6;}ul>li.index,ul>li.cat,ul>li.special,ul>li.user,ul>li.cooperation,ul>li.mobile{width:120px;}ul>li.index{height:43px;}ul.nav-content-box>li>ul{border-right:solid 1px #3a6fa2;margin:10px 0 6px}ul.nav-content-box>li>ul:after{visibility:hidden;display:block;font-size:0;content: ;clear:both;height:0}.nav-content-box>li:hover>ul{border-right:none;padding-right:1px;}ul.nav-content-box>li>ul>li{float:left;width:100%;line-height:2;text-align:center;}ul.nav-content-box>li.cat>ul>li{width:49%;}ul.nav-content-box>li>ul>li>a{display:block;width:100%;}

Summarize

The above is the html imitation Baidu Encyclopedia navigation drop-down menu function introduced to you by the editor. I hope it will be helpful to you. If you have any questions, please leave me a message and the editor will reply to you in time. Thank you very much for your support to Wulin.com website!

If you think this article is helpful to you, please reprint it. Please indicate the source, thank you!