I'm currently working on implementing a stylish menu
For this project, I am following a helpful guide that instructs to create the HTML in a single file.
The issue is that the menu isn't sliding smoothly as expected.
Here is the HTML code - no apparent errors:
<ul>
<li class="green" id="dropper">
<p><a href="#">Home</a></p>
<p class="subtext">The front page</p>
</li>
<li class="yellow" id="dropper">
<p><a href="#">About</a></p>
<p class="subtext">More info</p>
</li>
<!-- Similar list items continue -->
</ul>
JQuery code snippet may contain the issue:
$(document).ready(function(){
//Remove outline from links
$("a").click(function(){
$(this).blur();
});
//When mouse rolls over
$("#dropper").mouseover(function(){
$(this).stop().animate({height:'300px'},{queue:false, duration:600, easing: 'easeOutBounce'})
});
//When mouse is removed
$("#dropper").mouseout(function(){
$(this).stop().animate({height:'50px'},{queue:false, duration:600, easing: 'easeOutBounce'})
});
CSS code might be causing the problem:
body{
font-family:"Lucida Grande", arial, sans-serif;
background:#F3F3F3;
}
<!-- More CSS styling continues -->