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)
