This code is really simple and works in all the browsers including IE 7. Web Developers sometimes stuck in a css menu for a very long time. To reduce the stress, here is the simple code where you can copy paste and use it in your project and it is easily understandable.
You can also see the demo at the bottom of the page.
Here is the entire code:
<!DOCTYPE html>
<html>
<head>
<title>Simple CSS Menu - Blog.Theonlytutorials.com</title>
<style>
ul#menu, ul.submenu{
margin: 0;
padding: 0;
list-style: none;
}
ul#menu li{
float: left;
}
/* hide the submenu */
li ul.submenu {
display: none;
}
ul#menu li a{
display: block;
text-decoration: none;
color: #ffffff;
padding: 7px 14px;
background: brown;
border-right: 1px solid white;
border-top: 1px solid white;
float:none;
}
/* show the submenu */
ul#menu li:hover ul.submenu{
display: block;
position: absolute;
float:left;
}
ul#menu li:hover li, ul#menu li:hover a {
float: none;
background: #CC6600;
}
ul#menu li:hover li a:hover {
background: brown;
}
</style>
</head>
<body>
<ul id="menu">
<li><a href="#">Home</a></li>
<li><a href="#">Menu 1</a>
<ul class="submenu">
<li><a href="#">Submenu 1</a></li>
<li><a href="#">Submenu 2</a></li>
</ul>
</li>
<li><a href="#">Menu 2</a>
<ul class="submenu">
<li><a href="#">Submenu 1</a></li>
<li><a href="#">Submenu 2</a></li>
</ul>
</li>
<li><a href="#">Contact</a></li>
</ul>
</body>
</html>
Hope this code helps you! See the Demo Below:
Thanks, this is indeed a short css. I generally prefer one with javascript so that it has delays. CSS only is very sensitive. Menu closes as soon as mouse is out.
thanks simple and works great
its simple and useful, but it is having overlapping issues.