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:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
|
<!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:
