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)
How can i add a submenu on this css menu.. Looks good but i need to add submenus
Here you have ( on cssdrive exaples ) 2 level css menu, just apply this menu style ....
Nice looking menu btw !
I have been working on a similar menu for a couple of days now and hit a brick wall. Thanks for the very slick menu, and a great way of pulling off the achieved goal I was looking for, in a very slick and compact code base.
Again, many thanks for the hints. :)
this menu was written by someone else... the author is taking credit for someone elses work... git...
Very good!! very good indeed.., great job
Is it possible to make this menu horizontal?
It's great.
You menu is great and beauttful
clean code, fast & great menu with excellent look & feel.
Thanks Mark.
I love this menu - I am using a variation of it at a sute I am building for a friend of mine... http://www.youkitchens.com/
-Jim
Looking for more enhancements.