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
React antd tabs switching causes repeated refresh of subcomponents
describe: When the Tabs component switches back a...
A brief discussion on the implementation of fuzzy query using wildcards in MySQL
In the MySQL database, when we need fuzzy query, ...
About Tomcat combined with Atomikos to implement JTA
Recently, the project switched the environment an...
Press Enter to automatically submit the form. Unexpected discovery
Copy code The code is as follows: <!DOCTYPE ht...
Use of Vue3 table component
Table of contents 1. Ant Design Vue 1. Official w...
Detailed explanation of how to modify the style of el-select: popper-append-to-body and popper-class
How to modify the style of the el-select componen...
Summary of web designers' experience and skills in learning web design
As the company's influence grows and its prod...
Vue implements zip file download
This article example shares the specific code of ...
Uniapp's experience in developing small programs
1. Create a new UI project First of all, our UI i...
How to change the tomcat port number in Linux
I have several tomcats here. If I use them at the...
The difference between absolute path and relative path in web page creation
1. Absolute path First of all, on the local compu...
Docker FAQ
Docker only maps ports to IPv6 but not to IPv4 St...
How to connect SpringBoot to MySQL to get data and write to the backend interface
Table of contents 1. Create a new project 2. Add ...
MySQL variable declaration and stored procedure analysis
Declaring variables Setting Global Variables set ...
Vue implements three-dimensional column chart based on echarts
The three-dimensional column chart consists of th...