HTML imitates Baidu Encyclopedia navigation drop-down menu function
|
HTML imitates the Baidu Encyclopedia navigation drop-down menu function. The specific code is as follows: Demonstration 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 imitate 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">
Header 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="#">Category</a></span>
<ul>
<li><a href="#">Nature</a></li>
<li><a href="#">Culture</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="#">Characters</a></li>
<li><a href="#">Economy</a></li>
<li><a href="#">Technology</a></li>
<li><a href="#">Sports</a></li>
</ul>
</li>
<li class="special">
<span><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="#">City Encyclopedia</a></li>
<li><a href="#">College Encyclopedia</a></li>
<li><a href="#">Art Encyclopedia</a></li>
<li><a href="#">Science Encyclopedia</a></li>
</ul>
</li>
<li class="user">
<span><a href="javascript:void(0)">User</a></span>
<ul>
<li><a href="#">Tadpole Group</a></li>
<li><a href="#">Dream Plan</a></li>
<li><a href="#">Encyclopedia Tasks</a></li>
<li><a href="#">Wikipedia Mall</a></li>
</ul>
</li>
<li class="cooperation">
<span><a href="javascript:void(0)">Authoritative Cooperation</a></span>
<ul>
<li><a href="#">Cooperation Mode</a></li>
<li><a href="#">FAQ</a></li>
<li><a href="#">Contact Information</a></li>
</ul>
</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>
</ul>
</li>
</ul>
</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 by the editor. I hope it will be helpful to everyone. If you have any questions, please leave me a message and the editor will reply to you in time. I would also like to thank everyone for their support of the 123WORDPRESS.COM website! |
<<: Regarding the Chinese garbled characters in a href parameter transfer
>>: Exploring the practical value of the CSS property *-gradient
Recommend
Linux uses join -a1 to merge two files
To merge the following two files, merge them toge...
Several ways to encrypt and decrypt MySQL (summary)
Table of contents Written in front Two-way encryp...
The principle and implementation of js drag effect
The drag function is mainly used to allow users t...
How to install theano and keras on ubuntu system
Note: The system is Ubuntu 14.04LTS, a 32-bit ope...
Use of hasOwnProperty method of js attribute object
Object's hasOwnProperty() method returns a Bo...
Detailed example of changing Linux account password
Change personal account password If ordinary user...
How to create a trigger in MySQL
This article example shares the specific code for...
Improve the efficiency of page code modification and master the core knowledge of HTML language
When building a website, HTML language may seem un...
How to set background blur with CSS
When making some pages, in order to make the page...
How to use Gitlab-ci to continuously deploy to remote machines (detailed tutorial)
Long story short, today we will talk about using ...
How to separate static and dynamic state by combining Apache with Tomcat
Experimental environment Apache and Tomcat are bo...
Detailed explanation of docker network bidirectional connection
View Docker Network docker network ls [root@maste...
Detailed explanation of the "/" problem when proxy_pass forwards according to the path path
When configuring proxy_pass in nginx, if you matc...
Detailed explanation of GaussDB for MySQL performance optimization
Table of contents background Inspiration comes fr...
Detailed explanation of TypeScript's basic types
Table of contents Boolean Type Number Types Strin...