CSS Examples 
Mark’s Blue Blocks Menu
Author: Mark Newhouse- Taming Lists
A very attractive "blocks" CSS menu with hover effect. In IE Win, the links (<a>) are set to a width of 100%, while in other browsers, it's set to auto, using child selectors (html>body #button li a). This conditional CSS is possible since IE Win (6 and below) doesn't support child selectors while other modern browsers do, and is necessary, since a definition of 100% trips up Mac versions of IE5 and Mozilla.
The CSS:
#button {
width: 150px;
border-right: 1px solid #000;
padding: 0 0 1em 0;
margin-bottom: 1em;
font-family: 'Trebuchet MS', 'Lucida Grande', Arial, sans-serif;
font-size: 90%;
background-color: #90bade;
color: #333;
}
#button ul {
list-style: none;
margin: 0;
padding: 0;
border: none;
}
#button li {
border-bottom: 1px solid #90bade;
margin: 0;
}
#button li a {
display: block;
padding: 5px 5px 5px 0.5em;
border-left: 10px solid #1958b7;
border-right: 10px solid #508fc4;
background-color: #2175bc;
color: #fff;
text-decoration: none;
width: 100%;
}
html>body #button li a {
width: auto;
}
#button li a:hover {
border-left: 10px solid #1c64d1;
border-right: 10px solid #5ba3e0;
background-color: #2586d7;
color: #fff;
}
The HTML
<div id="button">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Toys and Games</a></li>
<li><a href="#">Computers</a></li>
<li><a href="#">Electronics</a></li>
<li><a href="#">Furniture</a></li>
<li><a href="#">Outdoors</a></li>
<li><a href="#">Home Appliances</a></li>
</ul>
</div>
Comments (33)
it has a great style and its simple and easy. i would prefer a transl. and blending feature on this.
very nice vertical menu! thanks for sharing!
thats nice
For horizontal, include 'display: inline;' in your style sheet. Nice looking. Is on our intranet right now! He he he!
There are 2 different versions of this tutorial so you can choose which one suits your application best. (first is best).
1. Using HTML lists
Uses the least amount of html, always a good thing.
2. Using tables
The original version of this tutorial and the common way menus are often created.
In practice both methods operates much the same way. Using lists requires the least amount of HTML (some of us hand-coders are lazy) and it's also the method I recommend.
Wow! Great work there. Beautiful menu. Thank you very much..
ad.comc4i.com
wow, it looks really great, thanks!
regards,
Mak
How can i integrate of second level to this menu
Malik
<style>
#button {
width: 777px;
border-right: 1px solid #000;
padding: 0 0 0 0;
margin-bottom: 1em;
font-family: 'Trebuchet MS', 'Lucida Grande', Arial, sans-serif;
font-size: 90%;
background-color: #90bade;
color: #333;
}
#button li {
border-bottom: 1px solid #90bade;
margin: 0;
list-style: none;
margin: 0;
padding: 0;
border: none;
float:left
}
#button li a {
display: block;
padding: 5px 5px 5px 0.5em;
border-left: 5px solid #1958b7;
border-right: 5px solid #508fc4;
background-color: #2175bc;
color: #fff;
text-decoration: none;
width: 100%;
}
html>body #button li a {
width: auto;
}
#button li a:hover {
border-left: 5px solid #1c64d1;
border-right: 5px solid #5ba3e0;
border-top: 2px solid #1c64d1;
border-bottom: 2px solid #5ba3e0;
background-color: #2586d7;
color: #fff;
}
</style>
<div id="button">
<li>Home
<li>Toys and Games
<li>Computers
<li>Electronics
<li>Furniture
<li>Outdoors
<li>Home Appliances
</div>
