Drop down menu (jquery+css)

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">
		<a href="" title="">MON MENU</a>
			<li><a href="#" title="">Sous menu 1</a></li>
			<li><a href="#" title="">Sous menu 2</a></li>

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() {

	// Lorsqu’on sort du menu
	$(‘ul.your_menu li’).mouseleave(function() {

CSS (the list will display with table-cell, the background will be transparent, and the bottom border will be round):

	display: table;

.your_menu li{

.your_menu li ul{
	list-style-type: none;

.your_menu li ul li{

.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;

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s