Drop Down Menu CSS

3:18 am, March 5, 2018

a simple css + html only drop down menu, no javascript required.

Code

html

css

@import url('https://fonts.googleapis.com/css?family=Mina');
.menu,.menu a {
	font-family: "Mina",sans-serif;
}
/* .menu */
ul.menu,ul.menu ul.sub-menu {
	padding:0;
	margin:0;
	z-index:10;
}
ul.menu li,ul.menu ul.sub-menu li {
	list-style-type:none;
	display:inline-block;
}
ul.menu li a,ul.menu li ul.sub-menu li a {
	text-decoration:none;
	background:#FFF;
	color:#444;
	padding:10px 15px;
	display:inline-block;
	margin:0;
}
ul.menu li ul.sub-menu li a {
	background:#666;
	color:#FFF;
}
ul.menu li a:hover,ul.menu li ul.sub-menu li a:hover {
	color:#FFF;
	background:#444;
}
ul.menu li {
	position:relative;
	margin:0;
	padding:0;
}
ul.menu li>ul.sub-menu {
	display:none;
	position:absolute;
	top:44px;
	left:0;
}
ul.menu li ul.sub-menu a {
	width:180px;
}
ul.menu li:hover>ul.sub-menu {
	display:block;
}
ul.menu li a:hover,ul.menu li a:active {
	background:#444;
}
ul.menu li ul li a:hover {
	background:#444;
}
ul.menu li ul.sub-menu li ul {
	display:none;
	position:absolute;
	top:0px;
	left:180px;
	width:280px;
}
ul.menu li ul.sub-menu li:hover ul {
	display:block;
}
ul.menu li ul.sub-menu li ul li a {
	width:280px;
	font-size: 16px;
}
ul.menu li a {
	background:#444;
	color:#CCC;
}
/* .menu */

scripts

Download & Run

Download File Run Demo Re-load Preview