Skip to content Skip to sidebar Skip to footer

Creating simple CSS menu

Reading Time: < 1 minute

How to create and integrate simple css menu into your web page.Not JQuery or Java script usages.Only simple css usages.All browsers compatibility and easy customizable.Download source code and view demo.

html code of the menu

            

Adding CSS

ul.top_menu {
	background: #696A6D;
	padding: 0px;
	margin: 0;
	list-style-type: none;
	min-height: 30px;
}
ul.top_menu li {
	float: left;
	min-height: 30px;
	border-right: solid 1px white;
	width:136px;
	text-align:center;
}
ul.top_menu li:last-child,.top_menu li.last-child {
	border-right: none;
}
.top_menu li a {
	padding: 7px 20px;
	display: block;
	color: #fff;
	text-decoration: none;
	font: 12px arial, verdana, sans-serif;
	font-weight: bold;
}
.top_menu li:hover a {
	text-decoration: none;
}
.top_menu ul {
	position: absolute;
	left: -9999px;
	top: -9999px;
	list-style-type: none;
}
.top_menu li:hover {
	position: relative;
	z-index:9999;
	background-color: #696A6D;
	color: #FFFFFF;
}
.top_menu li:hover ul {
	left: 0px;
	top: 30px;
	background-color: #696A6D;
	padding-top: 0px;
	width: 180px;
	z-index:9999;
}
ul.top_menu li ul {
	background-color: #696A6D;
	padding:0;
}
.top_menu li:hover ul li {
	min-height: 30px;
	border: none;
	width:180px;
}
.top_menu li:hover ul li a {
    background-color: #696A6D;
    color: #FFFFFF;
    display: block;
    font-size: 12px;
    line-height: 29px;
    min-height: 20px;
    padding: 1px 10px;
    text-align: left;
    text-decoration: none;
    text-indent: 5px;
    width: 180px;
    z-index: 9999;
}
.top_menu li:hover ul li a:hover {
	min-height: 20px;
	background: #999999;
	color: #ffffff;
	z-index:9999;
}
ul.top_menu li ul li a {
	border-top:1px solid #ccc;
}
ul.top_menu li span {
    transform: rotate(-180deg);
	display: block;
	float: right;
	margin-left: 5px;
}

View simple CSS menu Demo

Download JQuery Example (2 KB)