Recently, I worked on with a project which need a drop down menu. I share my code here:
You can find the simple demo here.
HTML (with just simple ul and li) :
<ul class="your_menu">
<li>
<a href="" title="">MON MENU</a>
<ul>
<li><a href="#" title="">Sous menu 1</a></li>
<li><a href="#" title="">Sous menu 2</a></li>
</ul>
</li>
</ul>
Jquery (I used version 1.8.3, but it will compatible with older version, just not so old):
$(document).ready(function() {
// Lorsqu’on entre dans le menu
$(‘ul.your_menu li’).mouseenter(function() {
$(this).find(‘ul:first’).slideDown();
});
// Lorsqu’on sort du menu
$(‘ul.your_menu li’).mouseleave(function() {
$(this).find(‘ul:first’).slideUp();
});
});
CSS (the list will display with table-cell, the background will be transparent, and the bottom border will be round):
.your_menu{
list-style-type:none;
display: table;
}
.your_menu li{
display:table-cell;
}
.your_menu li ul{
list-style-type: none;
display:none;
position:absolute;
opacity:0.8;
}
.your_menu li ul li{
display:block;
}
.your_menu li ul li:last-child{
-webkit-border-bottom-right-radius: 8px;
-webkit-border-bottom-left-radius: 8px;
-moz-border-radius-bottomright: 8px;
-moz-border-radius-bottomleft: 8px;
border-bottom-right-radius: 8px;
border-bottom-left-radius: 8px;
}
0.000000
0.000000