CSS is tricky and powerful. It’s easy to create a block style menu with CSS, the tricky part of put a short description under each menu is use SPAN tag, just copy the following to your markup file:
Thanks for Adam pointed out that we don’t need to be wrapped by divs. I made an update with more clean codes here.
<ul class="menu">
<li><a href="#">Menu01<br /><span>Short desc</span></a></li>
<li><a href="#">Menu02<br /><span>Short desc</span></a></li>
<li><a href="#">Menu03<br /><span>Short desc</span></a></li><
/ul>
then you need to put all these to your css file:
ul.menu { margin:0;padding:0; }
ul.menu li { display:block;padding:0; float:left;text-align:left;margin-right:2em; }
ul.menu li a { color:#fff;font:bold 14px georgia;text-decoration:none;line-height: 1.3em; display:block; }
ul.menu li a:hover { color:#ffc300; }
ul.menu li span { font:11px arial; color:#666; margin:0; }
ul.menu li span:hover {color:#999;}
Is that simple! and you can download this zipped sample file below. If you’re interested to see more CSS based menu designs, Smashingmagazine has a great collection and you check out those great design from all over the world.






5:08 pm
I love the new design. Congratulations!
5:08 pm
Thank you, Peety
5:08 pm
Nice technique. Although with your current CSS, it doesn’t work in IE6, since IE6 doesn’t support the :hover pseudoclass for elements other than “a”. If you replace the “#menu li span:hover” with “#menu li a:hover span” (since the span is inside the a), it’ll work in IE6.
Also, you can replace the br in each a with a space and add “display:block” to the “#menu li span”. This gives the same effect with less markup. A small thing, but I think it’s a bit cleaner.
5:08 pm
It’s fashionable to add some description to the navigation.Nice to see you catch up with it
5:08 pm
I was doing some similar projects, it will certainly be a good alternative these designed for you. Thanks yichi
Sorry traslation
5:08 pm
Trying 2 find some tutorials these days
cheers bro
5:08 pm
Very nice and elegant! Thank you for sharing.
5:08 pm
[...] nuestro botón. Para mis proyectos estaba utilizando un código personal, pero hoy, acabo de ver en vikiworks (un diseñador que admiro mucho) otra alternativa para lograr este tipo de menu. Ver Demo - Mas [...]
5:08 pm
You could take it one step further and make the
spana block element, float it and clear it. That would allow you to get rid of that extrabrin the code and keep your CSS oh-so-separate.5:08 pm
@andrew @zack, thank you so much for your tips… I should make an update for it
5:08 pm
[...] que comentan en Xyberneticos, posee un efecto mouseover muy bonito y elegante. Lo han encontrado en Vikiworks, un magnífico diseñador. Creo que lo incluiré en mis próximos [...]
5:08 pm
[...] and made a navigation menu in the header (look above this post). Which is a bastardised version of Vikiworks.com block navigation menu code. I have also been looking for and testing out different ways to display [...]
5:08 pm
[...] and made a navigation menu in the header (look above this post). Which is a bastardised version of Vikiworks.com block navigation menu code. I have also been looking for and testing out different ways to display [...]
5:08 pm
I think instead of putting a tag with an id in there, you could simply put a class or id onto the tag, and thereby eliminate the need for the unnecessary tag, like this:
Menu01Short desc
Menu02Short desc
Menu03Short desc
and then change the css to:
ul.menu { margin:0;padding:0; }
ul.menu li { display:block;padding:0; float:left;text-align:left;margin-right:2em; }
ul.menu li a { color:#fff;font:bold 14px georgia;text-decoration:none;line-height: 1.3em; display:block; }
ul.menu li a:hover { color:#ffc300; }
ul.menu li span { font:11px arial; color:#666; margin:0; }
ul.menu li span:hover {color:#999;}
which eliminates a tag and a line of css
5:08 pm
Sorry, my last post didn’t make much sense, as I wasn’t thinking and just wrote the code down instead of writing it properly. Okay, I was meaning you can get rid of the div tag, so that your html looks more like this:
<ul class="menu">
<li><a href="#">Menu01<br /><span>Short desc</span></a></li><li><a href="#">Menu02<br /><span>Short desc</span></a></li><li><a href="#">Menu03<br /><span>Short desc</span></a></li></ul>
5:08 pm
@Adam, Thank you so much for pointed out, I already made an update in this with your pretty clean codes, it was great
5:08 pm
Very cool! I used a similar menu in my last layout though the code was a lot messier than the clean code Adam gave. Thanks. Now I know how to tidy it up a little.
FYI, my old blog was featured on the menu article by Smashing Magazine. LOL. It was quite shocked to find out since I didn’t really add any fancy coding to it. I used to be more of a graphic design enthusiast rather than a web developing enthusiast.
5:08 pm
Hi there…
I was wondering. By the way, i love this menu solution:)
But i was wondering, i have this menu up and running on my website (testwebsite), and it all looks good in Firefox and Opera, but unfortunately IE7 doesn’t seem to like the menu. It shifts the complete header and the menu underneath it. I read the comment Andrew wrote and hoped this would fix my “problem” too.
Unfortunately it didn’t.
I can’t test it in IE6, since it’s not installed on this computer, but does someone know of a quick fix for this?
The testsite = http:www.staygoldstudio.com/2008
Thanks in advance,
Roy
5:08 pm
This works great for in line glossaries.
5:08 pm
thnks for sharing very ilustrative!
5:08 pm
Thanks for the nav menu.
It’s very simple to implement, but looks great and will still be readable for SEO reason….
Great post
5:08 pm
Thanks for the nav. One question, how can i center it? I want it to top-center.. Getting float off doesn’t help. Any ideas?
5:08 pm
[...] mis proyectos estaba utilizando un código personal, pero hoy, acabo de ver en vikiworks (un diseñador que admiro mucho) otra alternativa para lograr este tipo de menu. Ver Demo - Mas [...]
5:08 pm
[...] Source [...]
5:08 pm
fonts in the forum not a readable one
5:08 pm
[...] 25. CSS Block Navigation Menu [...]
5:08 pm
[...] 25. CSS Block Navigation Menu [...]
5:08 pm
[...] 25. CSS Block Navigation Menu [...]
5:08 pm
[...] 25. CSS Block Navigation Menu [...]
5:08 pm
[...] A CSS Block Navigation Menu (tags: webdesign css menu) [...]
5:08 pm
[...] 25. CSS Block Navigation Menu [...]
5:08 pm
[...] 25. CSS Block Navigation Menu [...]
5:08 pm
[...] 25. CSS Block Navigation Menu [...]
5:08 pm
[...] 25. CSS Block Navigation Menu [...]
5:08 pm
[...] 25. CSS Block Navigation Menu [...]
5:08 pm
[...] 25. CSS Block Navigation Menu [...]
5:08 pm
[...] 25. CSS Block Navigation Menu [...]
5:08 pm
[...] 25. CSS Block Navigation Menu [...]
5:08 pm
Very nice! =D
thx for sharing
5:08 pm
I like the style.
The query I have is that extra padding occurs when I switch to 1.1 Strict DocType. Any help in removing the spacing?
Chhers.