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
Realization of real-time file synchronization between Linux servers
Usage scenarios For existing servers A and B, if ...
In-depth understanding of the seven communication methods of Vue components
Table of contents 1. props/$emit Introduction Cod...
Pure CSS to achieve the effect of picture blinds display example
First, let me show you the finished effect Main i...
Recommend 60 paging cases and good practices
<br />Structure and hierarchy reduce complex...
mysql 8.0.19 win10 quick installation tutorial
This tutorial shares the installation tutorial of...
js to achieve the pop-up effect
This article example shares the specific code of ...
Mybatis paging plug-in pageHelper detailed explanation and simple example
Mybatis paging plug-in pageHelper detailed explan...
Using vsftp to build an FTP server under Linux (with parameter description)
introduce This chapter mainly introduces the proc...
Several mistakes that JavaScript beginners often make
Table of contents Preface Confusing undefined and...
Detailed code of the example of downloading the docker installation package from yum and installing it on an offline machine
1. On a networked machine, use the default centos...
WeChat applet implements countdown for sending SMS verification code
This article shares the specific code for the WeC...
Why developers must understand database locks in detail
1.Lock? 1.1 What is a lock? The real meaning of a...
The whole process of configuring reverse proxy locally through nginx
Preface Nginx is a lightweight HTTP server that u...
Detailed explanation of the commonly used functions copy_from_user open read write in Linux driver development
Table of contents Common functions of linux drive...
9 ways to show and hide CSS elements
In web page production, displaying and hiding ele...