Vikiworks™ Studio

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.

3308 times download.