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
43 Web Design Mistakes Web Designers Should Watch Out For
This is an article about website usability. The a...
Notes on upgrading to mysql-connector-java8.0.27
Recently, an online security scan found a vulnera...
JavaScript to achieve a simple magnifying glass effect
There is a picture in a big box. When you put the...
Summary of installation steps and problems encountered in decompressing the mysql5.7.24 version
1. Download https://dev.mysql.com/downloads/mysql...
Beginners understand MySQL deadlock problem from source code
After many difficult single-step debugging late a...
Graphical analysis of MYSQL5.7 configuration file location in Windows environment
1. MYSQL installation directory Copy the code as ...
Detailed explanation of MySQL deadlock and database and table sharding issues
Record the problem points of MySQL production. Bu...
6 inheritance methods of JS advanced ES6
Table of contents 1. Prototype chain inheritance ...
Introduction to MySQL Connection Control Plugin
Table of contents 1. Introduction to the connecti...
mysql installer community 8.0.16.0 installation and configuration graphic tutorial
mysql installer community 8.0.16.0 installation g...
js, css, html determine the various versions of the browser
Use regular expressions to determine the IE browse...
How to implement nested if method in nginx
Nginx does not support nested if statements, nor ...
Solution to the impact of empty paths on page performance
A few days ago, I saw a post shared by Yu Bo on G...
Learn MySQL execution plan
Table of contents 1. Introduction to the Implemen...
Vue+element ui realizes anchor positioning
This article example shares the specific code of ...