A super simple Pull-down menu implemented in jquery.
Effect chart
Initial effect
Mouse Suspension Effect
Code
Copy Code code as follows:
<! DOCTYPE html>
<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>
<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 () {
$ (' Nav li '). Hover (function () {
$ (this). Find ('. sub-menu '). CSS (' Display ', ' block ');
}, function () {
$ (this). Find ('. sub-menu '). CSS (' Display ', ' none ');
});
});
</script>
