jquery is a popular JavaScript framework that really works. Today I'm going to introduce you to the implementation code for the jquery pull-down menu, as described in the following code:
<! DOCTYPE html>
<meta charset= "UTF-8" >
* {
padding:0;
margin:0;
UL {
List-style:none;
. Wrap {
width:730px;
height:50px;
margin:100px Auto 0;
Background-color:lightgray;
padding-left:10px;
border-radius:10px;
padding-bottom:3px;
. Wrap Li {
Float:left;
width:130px;
height:50px;
margin-right:10px;
position:relative;
. Wrap a {
margin-top:3px;
Color:gray;
Text-decoration:none;
Display:block;
width:130px;
height:50px;
Text-align:center;
line-height:50px;
font-size:21px;
border-radius:10px;
. Wrap Li ul
Position:absolute;
Display:none;
. Wrap Li ul li
margin-top:3px;
. Wrap Li ul li a:hover{
color:red;
<script src= "Jquery-1.11.1.min.js" ></script>
$ (document). Ready (function () {
$ (". Wrap li"). Hover (function () {
});
<div class= "Wrap" >
<a href= "#" > China </a>
<li><a href= "#" > Guangzhou </a></li>
<li><a href= "#" > Shenzhen </a></li>
<li><a href= "#" > Beijing </a></li>
<li><a href= "#" > Shanghai </a></li>
<a href= "#" > USA </a>
<li><a href= "#" > San Francisco </a></li>
<li><a href= "#" > Washington </a></li>
<li><a href= "#" > Seattle </a></li>
<a href= "#" > UK </a>
<li><a href= "#" > London </a></li>
<li><a href= "#" > Edinburgh </a></li>
<li><a href= "#" > Birmingham </a></li>
<a href= "#" > South Africa </a>
<li><a href= "#" > Johannesburg </a></li>
<li><a href= "#" > Port Elizabeth </a></li>
<li><a href= "#" > Tshwane </a></li>
</li><li>
<a href= "#" > Australia </a>
<li><a href= "#" > Canberra </a></li>
<li><a href= "#" > Sydney </a></li>
<li><a href= "#" > Melbourne </a></li
</ul>
The above is a small set to introduce the jquery pull-down menu implementation code, I hope to help you, if you have any questions please give me a message, small series will promptly reply to everyone. Here also thank you very much for the cloud Habitat Community website support!