Home > Article > php教程 > A super simple drop-down menu implemented with jquery

A super simple drop-down menu implemented with jquery

高洛峰Original: 2016-12-15 16:01:211202browse

A super simple drop-down menu implemented with jquery.

Rendering

Initial effect

Mouse hover effect

A super simple drop-down menu implemented with jquery

Code

<!DOCTYPE html> 
<html> 
<head> 
<script type="text/javascript" src="jquery-1.11.1.js"></script> 
<style> 

nav a { 
text-decoration: none; 
} 
nav > ul > li { 
float: left; 
text-align: center; 
padding: 0 0.5em; 
} 

nav li ul.sub-menu { 
display: none; 
padding-left: 0 !important; 
} 

.sub-menu li { 
color: white; 
} 

.sub-menu li:hover { 
background-color: black; 
} 

.sub-menu li:hover a { 
color: white; 
} 

ul { 
list-style: none; 
} 
</style> 
</head> 
<body> 
<nav> 
<ul> 
<li><a href="#">Home 
<ul class="sub-menu"> 
<li><a href="#">sub1</a></li> 
<li><a href="#">sub2</a></li> 
<li><a href="#">sub3</a></li> 
</ul> 
</li> 
<li><a href="#">Programming 
<ul class="sub-menu"> 
<li><a href="#">sub1</a></li> 
<li><a href="#">sub2</a></li> 
<li><a href="#">sub3</a></li> 
</ul> 
</li> 
<li><a href="#">Japanese 
<ul class="sub-menu"> 
<li><a href="#">sub1</a></li> 
<li><a href="#">sub2</a></li> 
<li><a href="#">sub3</a></li> 
</ul> 
</li> 
</ul> 
</nav> 
</body> 
<script type="text/javascript"> 
$(document).ready(function() { 
$(&#39;nav li&#39;).hover(function() { 
$(this).find(&#39;.sub-menu&#39;).css(&#39;display&#39;, &#39;block&#39;); 
}, function() { 
$(this).find(&#39;.sub-menu&#39;).css(&#39;display&#39;, &#39;none&#39;); 
}); 
}); 
</script> 
</html>

For more related articles about a super simple drop-down menu implemented with jquery, please pay attention to the PHP Chinese website!

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：JQuery implements simple drop-down menuNext article：JQuery implements simple drop-down menu

See more

A super simple drop-down menu implemented with jquery

Related articles