Last tutorial, I showed you how to design a watercolor effect menu in Photoshop. This tutorial I will show you how to slice up the menu design (step by step) and put them together with CSS. Most of you probably know how to code a horizontal or vertical CSS list menu. Now let’s take it to the next level — code an advanced (un-typical) list menu utilizing the CSS position property.

View Demo CSS menu

Download Demo ZIP


Here are the required graphics to assembe the menu (you can download from the zip).

required graphics

1. Main background

Open the Photoshop file. Turn off the menu text Layer Group and save the main background as menu-bg.jpg.

screen 2

2. Button graphics

Turn off the background Layer Group and leave only the menu text layers visible. Make a rectangle selection cover the "home" item, go to menu Edit > Copy Merged (Cmd + Shift + C).

screen 3

Create a new file and take note of the file dimension (w x h), in my case the "home" graphic is 144 x 58px. Paste the "home" graphic in the new file. Go to menu Image > Canvas Size, adjust the image height x 2 (58 + 58 = 116px). Duplicate the home graphic layer and align it to the bottom. Erase the highlight strokes in the upper layer.

screen 4

Here is how the hover effect will work. We will set the link button to 144 x 58px, when mouseover, we will shift the background image from top to bottom.

screen 5

Repeat this step for the other buttons. You should have the follow graphics:

required graphics

3. HTML source

When you are done with the graphics, let’s start coding. Start with an un-ordered list <ul>.

  • note there is an id="menu" assigned to the<ul> tag
  • an unique class name assigned to each link <a>
  • an empty <span> tag (the purpose of this is to make the mouseover effect)
<ul id="menu">
  <li><a href="#" class="home">Home <span></span></a></li>
  <li><a href="#" class="about">About <span></span></a></li>
  <li><a href="#" class="rss">RSS <span></span></a></li>


Reset the menu to no padding, no margin, and no list-style. Specify the width and height same dimension as the menu-bg.jpg. Then attach the menu background image. The key point to remember here is set the position property to relative.

#menu {
  list-style: none;
  padding: 0;
  margin: 0;
  width: 774px;
  height: 210px;
  background: url(images/menu-bg.jpg) no-repeat;
  position: relative;

#menu span

Specify the span element to display:none (so they will be invisible by default). Specify position:absolute, so we can place the mouseover GIF image on exact position.

#menu span {
  display: none;
  position: absolute;

#menu a

The key point here is the text-indent property. We specify the text-indent property with a negative value (-900%), so the text will be hidden.

#menu a {
  display: block;
  text-indent: -900%;
  position: absolute;
  outline: none;

#menu a:hover

When mouseover the link, we want to shift the background image from top to bottom.

#menu a:hover {
  background-position: left bottom;

#menu a:hover span

When mouseover the link, we want the span element to display:block.

#menu a:hover span {
  display: block;

#menu .home

Specify the width, height, and background image. Since we already specified all <a> element postition:absolute in previous step, now just say where the .home button should be by specifying the left and top property.

#menu .home {
  width: 144px;
  height: 58px;
  background: url(images/home.gif) no-repeat;
  left: 96px;
  top: 73px;

#menu .home span

Here we are specifying the width, height, background, and position of the span element of .home (mouseover GIF image)

#menu .home span {
  width: 86px;
  height: 14px;
  background: url(images/home-over.gif) no-repeat;
  left: 28px;
  top: -20px;

#menu .about

Copy the .home rules and rename them to .about. Now just change the width, height, background, left, and top property.

#menu .about {
  width: 131px;
  height: 51px;
  background: url(images/about.gif) no-repeat;
  left: 338px;
  top: 97px;
#menu .about span {
  width: 40px;
  height: 12px;
  background: url(images/about-over.gif) no-repeat;
  left: 44px;
  top: 54px;

#menu .rss

Repeat this step for .rss

#menu .rss {
  width: 112px;
  height: 47px;
  background: url(images/rss.gif) no-repeat;
  left: 588px;
  top: 94px;
#menu .rss span {
  width: 92px;
  height: 20px;
  background: url(images/rss-over.gif) no-repeat;
  left: 26px;
  top: -20px;

All in one:

#menu {
  list-style: none;
  padding: 0;
  margin: 0;
  width: 774px;
  height: 210px;
  background: url(images/menu-bg.jpg) no-repeat;
  position: relative;
#menu span {
  display: none;
  position: absolute;
#menu a {
  display: block;
  text-indent: -900%;
  position: absolute;
  outline: none;
#menu a:hover {
  background-position: left bottom;
#menu a:hover span {
  display: block;

#menu .home {
  width: 144px;
  height: 58px;
  background: url(images/home.gif) no-repeat;
  left: 96px;
  top: 73px;
#menu .home span {
  width: 86px;
  height: 14px;
  background: url(images/home-over.gif) no-repeat;
  left: 28px;
  top: -20px;

#menu .about {
  width: 131px;
  height: 51px;
  background: url(images/about.gif) no-repeat;
  left: 338px;
  top: 97px;
#menu .about span {
  width: 40px;
  height: 12px;
  background: url(images/about-over.gif) no-repeat;
  left: 44px;
  top: 54px;

#menu .rss {
  width: 112px;
  height: 47px;
  background: url(images/rss.gif) no-repeat;
  left: 588px;
  top: 94px;
#menu .rss span {
  width: 92px;
  height: 20px;
  background: url(images/rss-over.gif) no-repeat;
  left: 26px;
  top: -20px;


That’s it. You can preview my CSS menu.

Note: there is an IE6 bug where the <span> hover effect doesn’t display properly. To fix that, you can use Javascript to specify the <span> to display block on mouseover.


Oct 29, 2007 at 1:41 am

WOW nice rollover menu.. ^_^

Oct 29, 2007 at 1:52 am

You are a real artist! Amazing work!

Oct 29, 2007 at 2:02 am

Perfect tutorial! Thank you :)

Oct 29, 2007 at 2:22 am

Your tutorials are always so so helpful. Brilliant work as usual.

Now I must read it again for it to sink in. lol!


Oct 29, 2007 at 3:11 am

thx 4 your tutorial…so amazing….

Paul Wilkins
Oct 29, 2007 at 3:33 am

That’s a great tutorial, but please, you may want to update “Start with an un-ordered list ” to say “Start with an un-ordered list “

Paul Wilkins
Oct 29, 2007 at 3:35 am

That’s a great tutorial, but please, you may want to update the “Start with an un-ordered list” piece so that it doesn’t use an OL tag but instal an UL tag.

Jonny Haynes
Oct 29, 2007 at 6:07 am

Hi nice tutorial, however you made a mistake – may confuse some people – see below … you mention a un-ordered list but show the tag for an ordered list.

Great work though … keep it up!

3. HTML source

When you are done with the graphics, let’s start coding. Start with an un-ordered list .

Oct 29, 2007 at 6:52 am

This is a great tutorial, I have a slightly different way of doing the same thing. I place the span tags around the link text like this –> About
So when you declare – span {display:none} – it hides the text.

Oct 29, 2007 at 6:53 am

^ ^ Sorry that should say span>About/span>

Oct 29, 2007 at 6:55 am

Grr! How do you show tags using these comments??

Try this! <span> About </span>

Oct 29, 2007 at 6:59 am

Great tutorial!

Good to know.

Oct 29, 2007 at 7:27 am

You can achieve pretty much the same effect – but without the use of non-semantic span tags – by applying the background image directly to the a tag, and setting the width and height on that.

Unless I’m missing something specific with the span…?

Oct 29, 2007 at 7:34 am

Wonderfull job. Go on !

Oct 29, 2007 at 7:36 am

Actually, looking back at the code and what I just wrote – you’d need to do the following:

Combine the ‘out’ and ‘over’ graphics into a single image – ‘out’ state at the top, ‘over’ state at the bottom.
Use the css background-position property to set the background image at the top of the ‘a’ tag when it’s inactive, and set the background-position at bottom on the ‘a:hover’. You’ll need to check your specicivity to make sure the right image is displayed on the right li.
Set the display of the ‘a’ tags to ‘block’, and set the width and height (you may need to float the ‘li’s).
Set the text-indent on the ‘a’ tags to a fairly large negative number.

That *should* be your lot (although I’m probably missing something out!) – no non-semantic span tags, and single image rollovers which should save on both bandwidth and server requests (and make your css a tiny bit leaner).

Ryan Scherf
Oct 29, 2007 at 7:53 am

Your tutorial has a typo:

3. HTML source

When you are done with the graphics, let’s start coding. Start with an un-ordered list .

Oct 29, 2007 at 7:56 am

Wow… this is great. I’ve only skimmed the coding but with all that positioning does the menu work correctly in every single browser/resolution combo?

I can’t wait to try this out though…!

Oct 29, 2007 at 8:03 am

excellent ! … je vais le tester tout de suite !

Elliot Jay Stocks
Oct 29, 2007 at 8:41 am

It’s funny you should post this, Nick – I posted my own very similar tutorial at the weekend! I think I prefer the way you’ve laid yours out, though, and the hover effect with the is a really nice touch. Well done… again! :)

Oct 29, 2007 at 10:36 am

Mike – You are correct. The added span and extra graphic can be consolidated to a single sprite graphic with less CSS required as you mentioned.

Oct 29, 2007 at 12:40 pm

Great you have this tip continued and put it to the next level.. a Must Read tutorials indeed.. Bravo again!

Oct 29, 2007 at 1:34 pm

@Mike – Yes, alternatively you can put all the button graphics in one single GIF image, but by separating the graphics it gives better control. I can simply change the button location by the top and left property (without going to Photoshop, editing the image, and then changing the CSS again).

@Jonny Haynes, Paul Wilkins – Thank you for the correction. The typo is fixed (changed from <ol> to <ul>).

Oct 29, 2007 at 1:06 pm

nice tutorial, but using 7 images here seems a bit bulky when it could be done with 2. check out elliot’s tutorial above or alistaprt for the css sprite method.

Rahul Joshi
Oct 29, 2007 at 2:39 pm

nice one… i was waiting for such a tutorial….
actually i wanted to implement a horizontal navigation menu in a wordpress theme, where normal and hover states are different images. This tutorial is a bit close to that, but can u please help me out and let me know how can i achieve such menu in wordpress?

Oct 29, 2007 at 6:20 pm

what function does the “outline:none” on the “#menu a” element have?

Oct 29, 2007 at 7:06 pm

@andrej – the outline property is to remove the dotted border around the link in Firefox on click.

Oct 29, 2007 at 7:18 pm

thank you, nick. great article by the way.

I was wondering if there is any negative search engine outcome when using css-properties such as text-indent: -900% to remove search engine relevant html code from the users eye.

In your case it is not critical, however what about properties like display:none, are capable of removing whole blocks of text.

Oct 30, 2007 at 1:13 am

Wow. Exelent man, as always. You’re like my heroe, every day i learn more and more XHTML tips but this is just great.

Timothy Diokno
Oct 30, 2007 at 4:18 am

@Nick: Yes, it can be done in two images.Why seven? It’s because of the amount of time consumed when loading the whole image needed for the sprites?

Oct 30, 2007 at 4:22 am

@ andrej: As far as I’ve found, there are no negative search engine outcomes to using a negative margin on the text – the text is still in the markup and is fully readable by search engines and screenreaders. On the other hand, some search engine robots and screenreaders ignore any text that’s hidden by display:none (or so I’ve read) so that would have an impact. Both methods fall down when images are turned off and CSS is turned on in a user’s browser, but there are a couple of ways around this (which require non-semantic span tags, unfortunately) – mezzoblue has a list of different methods with advantages and pitfalls.

For most sites I design/build, I use a semantic single-image negative margin method with the background image, display:block and dimensions applied directly to the ‘a’ tag. It’s served me well so far, and it’s reasonably quick to do.

Oct 30, 2007 at 8:12 am

@Mike: Search engines discourage what they call cloaking, basically intentionally showing the search engine something different than what your site shows a user. Sites that use a heavy amount of Flash often cloak to get their site content in the search engines. I do not think negative margin would be considered cloaking.

Search Engine Spiders cannot read CSS or JS so I doubt that they are paying attention to whether or not an element is set to: display:none or visibility:hidden.

Just turn off your CSS in FF and that is most likely what Google sees.

Sig Generator
Oct 30, 2007 at 8:25 am

Rollovers in css basically right? Nice effect, the notepaper effect is still pretty fresh.

Hayden Noonan
Oct 30, 2007 at 8:41 am

There is a better method, although it takes a bit extra CSS code, that only requires the use of one image. By using only one image for all effects (normal, focus, hover, etc..), you are guaranteed that all images will be displayed instantly without any extra loading time when hovered over or focused on.

To do this, you use the “background-position” property.

Quite a nifty little trick which I use on most of my designs nowadays.

Kevin Holler
Oct 30, 2007 at 8:49 am

Very nice indeed.. I love the whole freestyle feel to it. It doesn’t feel so, bland. Cool idea.

Oct 30, 2007 at 9:27 am

Hmmm. If you’re going to use images for just about everything in the menu, why are you even bothering with CSS? One of the chief advantages of CSS menus is that they’re easy to update — they’re text. With this menu, you have to redo images and worry about sizes every time something changes. It’s a beautifully done menu, but still.

Oct 30, 2007 at 9:34 am

Overall very nice. Doctype on this is XHTML 1.0 Strict when it should be Transitional. The empty <span> tag is throwing validation warnings as well as the <link> tag inside of the <div id=”content”>. The single image is great but the use of the empty span can be overcome as you mentioned with the negative margin.

Well done, thanks.

Oct 30, 2007 at 10:10 am

How in the !#@$$ is this advanced? its @#$% css…

Oct 30, 2007 at 10:15 am

wow — so, so simple yet so genius — tnx for the tips.

Oct 30, 2007 at 10:30 am

amazing!! your blog is great and this tutorial rocks!!


Oct 30, 2007 at 10:31 am

Well, ryan, it’s !#@$$ advanced CSS because there are other, simpler, methods of using CSS for menus. I’m sorry this article insulted your supreme intelligence and skill.

Oct 30, 2007 at 11:00 am

Great Article, I love the theme and i love how your website comes together, very creative…


Oct 30, 2007 at 11:14 am

I haven’t even finished reading the article, I am just absolutely BLOWN AWAY by your site design. Completely awesome!! As to the comment by Wendy, I think that CSS is the future of all layout not just text. I still use photoshop to export tables for my menus and rollovers. but I am currently trying to convert to CSS. why? because tables are a pain in the a**. CSS seems to allow easier placement and arranging of items without all the fuss of table alignment.

Jagan Ram
Oct 30, 2007 at 11:25 am

looks very interesting

Dan Black
Oct 30, 2007 at 11:33 am

I’ve got to chime in with Mike here… What’s the reasoning for adding the span tag when the same can be achieved by being directly applied to the list items themselves. I suppose its to hide the type underneath?

Oct 30, 2007 at 12:24 pm

First: Fireworks does this better than Photoshop, and faster, too. Two: this is for personal sites because it’s not SEF. In other words, with this technique you sacrifice SEF at the expense of graphics. Sorry I can’t dig up the alternative that allows it both ways.

Oct 30, 2007 at 12:26 pm

Pretty good, but really you need to tell me how did you do that dashed line in photoshop, or is it illustrator?

Phil Moss
Oct 30, 2007 at 1:16 pm

agreed…its poop

Mark Story
Oct 30, 2007 at 1:39 pm

Why use the span elements at all? you can easily do the hover with a single graphic by implementing a CSS sprite. So both the normal and hover state would be one graphic and you would shift the graphic up to reveal the over state instead of using a extra unneeded span element and another graphic file. But other than that a good tutorial.

Oct 30, 2007 at 1:47 pm

Disregard the douches who are downplaying your menu. This is a fantastic approach!!

Michael Whalen
Oct 30, 2007 at 1:51 pm

I have to agree that this wasn’t exactly coded the easiest and most efficient way. There are quite a few things I might do differently to use less markup and CSS, but, cool idea!

Fabio Sasso
Oct 30, 2007 at 2:24 pm

Excellent article… thanks..

Limited Edition iPhone
Oct 30, 2007 at 2:55 pm

What font did you use for Rss. I really like that R

Livin Truth
Oct 30, 2007 at 3:09 pm

whos the tool who named him self “limited edition I****” (censored myself).
Also, thanks for the tip, i’m viewing this in IE7 and at first i thought it was flash when it did its transition.

John Page
Oct 30, 2007 at 4:05 pm

Mark Story has the right idea. There is a CSS menu mouseover technique which makes the span tags unneccessary. Make one background image with both background images on it. Set the hover state for the a tag to change the background-position so that it shows the other portion of the background image. Done.

Having gotten that off my chest.. nice design.

Oct 30, 2007 at 5:20 pm

Hey man, great tip.. Do you read your e-mail? I´ve tried sending you e-mail, but never gotten a reply back.. Please send me a note so I know how to reach you.


Shantanu Bala
Oct 30, 2007 at 7:10 pm

Great menu. The complicated CSS placement is amazing. Only downside is the amount of images the menu, and this site has. I prefer lightweight, fast loading, and low bandwidth consuming templates. Don’t mean to criticize your site, but 700k for a site is fairly unbelievable. There are bigger sites, but not everyone has T1. Not only that, but the bandwidth consumption is terrible.

Oct 30, 2007 at 9:00 pm

humm… It makes me want a news template

Oct 30, 2007 at 9:32 pm

quickly reading through your code I think there is a little simpler/shorter method that I have done before. i’ve done it on the following site – – if someone wishes to disect my code to understand – not sure if I have a bookmark on this method…I’ll go check

Oct 30, 2007 at 9:40 pm

i also believe the method i did worked fine in IE6 with no javascript.

Oct 30, 2007 at 9:47 pm

copy/paste from my css

#nav a:hover {
background-position: 0 -42px;

a.home {
display: block;
float: left;
width: 60px;
height: 42px;
background: url(“../images/nav_rollover_home.jpg”) 0 0 no-repeat;
text-decoration: none;

my html file – i took out the brackets otherwise the site converts the html

div id=”nav”
a href=”/” class=”home”

this is all you need – i remember it working on Mac/PC multiple browsers

Oct 31, 2007 at 9:08 am

@Boris: Why do you use the wallpaper of bartelme in your design?

Oct 31, 2007 at 1:51 pm

I just changed position property of ‘#menu’ to absolute.
And ‘#ment span’ to relative.
So the mouseover function works in IE & FF.

Andrew Ingram
Oct 31, 2007 at 8:33 pm

I haven’t read all the comments but I imagine most of this has already been said.

The menu looks very nice but it could have been done much more effectively using just one or two images and without the issue of waiting for multiple images to load.

I wrote a plugin for Fireworks that practically automates the whole process of making such a menu using a single image.

Nov 1, 2007 at 1:11 am


can one switch this css to multiple languages using the same objects?
maybe thats just an .svg option available in go live; back when it was supported by adobe and w3c, and live motion worked too.
has anyone seen where smart objects and .swg went off to?
i can seem to find much on that
seems we are either coding in html or cutting up images. the dom applies but i guess its not for web graphic designers, and these people can t print like the printers who cant typograph, or read computer code. ill be in the closet hiding out making things move and buttons that make noise on the computer. hand rendering is much better than computer rendering too. i make money as a cadd drafter. so I cant write poetry.

its clear i should pick up a book on css too, this looks pretty cool.
blrrr blrr blhi. I like chicken; my palsy

Nov 1, 2007 at 9:19 am

Bart because it’s good for design and it’s free for use.


Eliena Andrews
Nov 1, 2007 at 9:30 am

i got what i was looking for thanks.

Brian Purkiss
Nov 1, 2007 at 1:28 pm

Very nice post!!!!!
I am going to use that!

Carl Davison
Nov 2, 2007 at 1:51 am

Wow, what a beautiful site you’ve got here. And great content. I’ll be sticking around! Thanks!

Nov 2, 2007 at 2:49 am

What program do you use to code it? Just wondering…

Ara P.
Nov 2, 2007 at 8:33 am

amazing tutorial..i will try to use it in my next website..thanks a lot

Scottsdale Web Design
Nov 2, 2007 at 8:05 pm

cool tutorial, I’ve never seen the process laid out in such an easy to understand format before.

j e a m
Nov 3, 2007 at 7:47 am

wow this tut is very nice thanks

Nov 4, 2007 at 2:11 pm

Thank you SO much. Really. ^ ^
Your tutorial is perfect for me!

(and sorry for my uncertain english :p)

Brian Khouw
Nov 5, 2007 at 3:00 pm

Nice tutorial, will try it sometime. Thanks.

Nov 6, 2007 at 3:08 am

am very glad to found your website first time and it’s amazing and intersting css
thanks u very much …
i hope will get much more about css

Nov 7, 2007 at 1:54 am

Great tutorial… ended up using Elliot Jay’s… but this got me most of the way…

Nov 7, 2007 at 6:39 am

Hi thanks for this grate tutorial and for this wonderful website!
I come back every day to search for something new ;-)

Emre Toprak
Nov 7, 2007 at 12:35 pm


Aaron Zipagan
Nov 7, 2007 at 5:49 pm

hi,..i like your tutorial but i’m really amazed about your “back to top” action…
can you please give a tutorial for that or at least send me how?…


Nov 7, 2007 at 9:58 pm

yeah! me too! i fall in love with the BACK TO TOP action, it’s really cool, so we’re two now :)

back to top tutorial!!

Nov 8, 2007 at 1:43 am

that’s cool,thank you!

Search Scripts
Nov 8, 2007 at 8:16 am

Very Clear and Concise tutorial to create this CSS based menu. It first looked like one has scanned his handwriting to create this menu.

Nov 9, 2007 at 9:16 pm

Great job!

Website Designer
Nov 10, 2007 at 7:25 am

Great stuff. Keep posting. The best thing i like about your work is, despite the obvious heavy amount of graphics that’s used, it still loads quickly. You’ve got talent. I’m jealous.

compare car insurance rate
Nov 11, 2007 at 10:18 pm

Man, what a well set-up website!

Nov 13, 2007 at 1:41 am

Thanks for taking the time to share this great technique with us. Great looking site by the way.

Web design Bulgaria
Nov 13, 2007 at 4:39 am

Awesome! Very impressive and influential to see someone take so much time of their own to give this to all web designers. Thanks!

Web design Bulgaria
Nov 13, 2007 at 4:39 am

Awesome! Yeah Very impressive and influential to see someone take so much time of their own to give this to all web designers. Thanks!

Nov 14, 2007 at 10:00 am


Nov 14, 2007 at 8:57 pm

One of the most beautiful sites I’ve seen. Not only visually stunning, but technically brilliant. Great work! I look forward to seeing future tutorials.

Nov 15, 2007 at 3:24 am

Great work!
Thanks a lot for share this great idea!
I found it has a little bug in IE6,
so i changed the ‘display’ to ‘visibility’,
and it works! No need javascript!

Mehmet Poyraz
Nov 15, 2007 at 9:48 am

very nice

Nov 17, 2007 at 1:56 am

Its really nice man, keep it up . . . . .

Nov 17, 2007 at 7:36 am

do yo use microsoft expression?

albert lumu
Nov 17, 2007 at 11:51 am

This is so cool!

Nov 17, 2007 at 10:27 pm

You are very good at teaching! Congratulations by this tutorial!

Nov 19, 2007 at 6:35 pm

excellent work guys !!! just respect ;-)

Nov 21, 2007 at 6:45 am

Awesome tutorial thanks

Nov 21, 2007 at 5:13 pm

Just Perfect ;)
Really easy and nicely tutorial..

Web hosting, design & marketing
Nov 21, 2007 at 9:00 pm

Thanks for the detailed instructions. I wonder how it will hold up in Opera, IE 5.5, etc… Will have to try I guess. Your site is an inspiration. I am gonna try these flowers etc. as background soon

Nov 24, 2007 at 8:44 pm

Absolutely great guide and wonderful website! Love the design

Nov 25, 2007 at 6:19 am

You’re such an inspiration. Thanks! :D

Nov 26, 2007 at 8:47 am

that nice and i want to implemented on my website…

Nov 27, 2007 at 11:24 pm

padrisimo este tapiz

Edmonton Web Design
Nov 28, 2007 at 4:40 pm

Fantastic tutorial. Really easy to follow and use. I’ll definitely be using some of these techniques on future sites. Thanks!

Dec 2, 2007 at 5:55 am

I love this tutorial, and the techniques you use are superb.

Just wondering as to why you use two images – one for the circling and one for the supplementary text (like “home” and “who”)? Surely you could of just placed them into a single image that is css-positioned?


Dec 2, 2007 at 5:58 am

Sorry, I’ve just read the previous comments!

Dennison Uy
Dec 2, 2007 at 11:04 am

I have been contemplating on writing a similar article as a “tutorial” for one of my newly hired web developers. This article fits the bill nicely. You just saved me a lot of time :)

bahçe aydınlatmaları
Dec 3, 2007 at 4:14 am

thanks .perfect

kablo kanalı
Dec 3, 2007 at 4:15 am

Absolutely great blog

Dec 4, 2007 at 10:16 am

This is great! These tutorials are clear and really help!

Dec 5, 2007 at 5:42 am

that give me inspiration on my coming design. you’ll have a new reader! XD
thanks a million. lookin forwward to read your future tutorials.

Dec 5, 2007 at 5:54 am

Cool!!! Really Awesome!! the best menu I’ve ever seen!!

Dec 5, 2007 at 7:33 pm

Güzel tasarım.. tebrikler..

Anton Shevchuk
Dec 7, 2007 at 4:46 am

Nice article, i use your tutorial for create menu on my personal blog.

ashif hus
Dec 7, 2007 at 5:05 am

this is good tutorial but not useful it is also unique. but we can not keep such menu in website.

ashif hus
Dec 7, 2007 at 5:10 am

sorry for writing this now i have decided to keep colon in my site :)

Mark Abucayon
Dec 7, 2007 at 10:15 pm

so nice, I used the technique already… all in all nice job and excellent.

Dec 9, 2007 at 1:19 pm

There is a problem with having position: absolute for the main div, and position: relative for everything else. In Firefox, Opera and Safari, if you want the div to be flush against the top of the page, it adds a space. The only way to fix this is to make everything the same attribute.
I just found this out the hard way. If you know a workaround, that would be wonderful.

Dec 11, 2007 at 10:07 am

Good Stuff

Dec 12, 2007 at 1:04 am

I simply wanted to add that you should add text-decoration: none to the stylesheet, as there are odd blue lines (the underlines) rendered from the position of the link way off to the left (to meet the text that is in the negative margin). Although this is a rendering fault and shouldn’t be required (and probably isn’t in many browsers), it’s probably worth the 24 some bytes of code when it produces no incompatibilities whatsoever.

Victor Fauziek Sidharta
Dec 12, 2007 at 10:49 am

Thank you, it’s a great design. More power to you

Dec 12, 2007 at 2:29 pm

Great, Useful Article.. Like many of yours..
Can you provide the JavaScript for the IE bug, for those who don’t understand Javascript.

Dec 14, 2007 at 12:33 am

This is really cool and nce.

Dec 16, 2007 at 4:11 am

Good work thanks

Sebastian Lissau Lund
Dec 17, 2007 at 4:09 am

Hi there, good tutorial but, I can´t seem to find the Photoshop file in the zip file.

Sebastian Lissau Lund
Dec 17, 2007 at 4:54 pm

Sorry, I found the Ps file.

Dec 17, 2007 at 9:27 pm

hey…thanx for sharing your knowledges…hope you can be more succesful in your career…peace..

Dec 19, 2007 at 5:41 pm

U ARE AMAZING!!! thank u so much for sharing your info!!! :)

Dec 19, 2007 at 9:09 pm

how do you download/get photoshop?!

Dec 23, 2007 at 1:55 pm

Really nice site, of course goes to my bookmark list.

Now, for emily (post 131)
U should buy a licensed photoshop copy, but if you want 2 download, search about “torrentz” and read about them

Dec 23, 2007 at 7:47 pm

Well done ! You’re my Master…teach me more.

Dec 26, 2007 at 1:15 am

its a great site i love it,,very cool

Dec 30, 2007 at 10:51 am

I am very impressed — thanks for the tutorial.

Jan 1, 2008 at 3:26 am

wo wo…. this is very nice

thanks a lot

Jan 2, 2008 at 8:23 am

Great tutorial. Thanks for sharing with us.

Jan 4, 2008 at 11:06 am

It’s so nice. I will bookmark your web for further learning.
Thanks for sharing!

Salman Tanvir
Jan 4, 2008 at 2:03 pm

This is really interesting, thanks for sharing.

Jan 5, 2008 at 12:45 pm

First of all, thanks for writing this great tutorial.

I am working on a menu my own and I saw that here in your own menu at webmasterwall, you display the data about how much people have subscribed.
Can you explain how you did that?

Arun Pattnaik
Jan 7, 2008 at 5:36 am

One of the finest tutorials I have ever seen. Stumbled & Bookmarked. Thanx!

Interactive Media Manager,
AXEKS Labs, India

Jan 7, 2008 at 10:18 pm

This is really interesting,thank you for sharing this.I have bookmarked for my reference.

Arun Pattnaik
Jan 15, 2008 at 6:43 am

Would you like to share how to tweak the menu to get the effect similar to the one u used on this page? I tried but failed. Also, the comment preview thing is very interesting. (In fact, i’m writing this comment looking at the preview itself, lol)!

Interactive Media Manager,
AXEKS Labs, India

Jan 15, 2008 at 7:06 am

I’ll try to do it .. It’s looks great … But I read it and I have some daughts .. Let’s see what I can do!

Thanks for the tutorial! :D

Gary Storm
Jan 16, 2008 at 11:01 pm

Great tutorial! So glad I`m one of your subscribers :) Could you please share the javascript fix for the IE6 span problem?

Dhruva Sagar
Jan 18, 2008 at 5:46 am

Simply awesome. Thanks a ton for this man, I love it!

Jan 18, 2008 at 10:45 am

Enjoy your tutorials,your website and so many amazing works.

Jan 21, 2008 at 12:37 pm

Great tutorial! I implemented it on my site. Thanks!

Jan 25, 2008 at 2:11 am

Nice work. keep it up guys.

Jan 27, 2008 at 9:55 am

whew, cool tutorial, i must try it.. thanx

Jan 29, 2008 at 6:45 am

This is really interesting,thank you for sharing this.I have bookmarked for my reference.

Jan 29, 2008 at 3:18 pm

Wow this is cool. Nice work dudes at Designer Wall. Hats off to you.

Jan 30, 2008 at 4:07 am

What do you mean ?

Foxinni - Wordpress Designer
Jan 30, 2008 at 12:06 pm

Nice. I love to make use of matrix’s. I’m gonna make good use of it in my next design. Can’t Wait. Excellent blog design and awesome post.

Jan 30, 2008 at 6:13 pm

This is a great tutorial -I showed it to a few people. I have a question though
If I place my Navbar and links into on div I can get them to display horizontally with no problem.

Instead of HTML links for my navbar I am having it display layers for the content.

This is OK but one problem I have is it doesn’t like
so, I use and assign hover properties in the css but it won’t display horizontally -any ideas?

Jan 31, 2008 at 3:28 pm

What can i say? Great job! :)

Cloud9 Design
Jan 31, 2008 at 5:56 pm

wonderful tutorial. one thing though. you shoudl reallya dd a print this page button on your posts. formatting when haywire when i cut & pasted this into word so i could print it out.

Nicolas Alexander
Feb 4, 2008 at 3:20 am

very thorough ! just a thing…you should name your photoshop layers in your tutorials

Feb 7, 2008 at 10:59 am

Awesome tutorial, I like it very much!
You are doing a great job.

Feb 8, 2008 at 12:38 pm

hey, i was searching in the net for some paper tutorials in photoshop for my online library system project in school, and then i get here in yout site, and i was shock that css can do that menu animations! how nice! i treat persons like you as a GOD!!! haha… i want to be a great web designer someday.

great tutorials, pls keep this tutorials for future researchers, tnx again!

Milinda Lakmal
Feb 8, 2008 at 11:14 pm

Nice tutorial. Thanks.

Ali malik
Feb 13, 2008 at 9:29 pm

ummm wouldn’t be easier if we used rollover on DW or in FW -no coding needed-
and much shorter

Feb 15, 2008 at 10:32 am

I just love it! Also your watercolor tut is great. Your references with brushes etc are AWESOME. Great job. Thanks for sharing…

J. M.

Feb 18, 2008 at 9:48 am

Just one point, image load. Your images are quite small here but I still noticed onload that on mouse over there was a delay to the image load. Perhaps add some js to pre-load images to the browser cache. Examples of which can be found here .
Feb 21, 2008 at 2:36 pm

Great job! Thanks for sharing this.

Feb 22, 2008 at 4:16 am

it doesn’t work on IE6. why? it’s just an hover effect…

Technology News
Feb 22, 2008 at 8:30 am

thanks..really nice post.

Dan Loffler
Feb 22, 2008 at 8:49 am

Your website makes me horny baby. And you tutorials get me high. Thank you so much.


Feb 22, 2008 at 9:03 am

Very nice tutorial. I like the attention to detail and the very clear explanations of each step. There are lots of people out there learning CSS and Design via the web, and these types of posts are very beneficial! Kudos!

Feb 22, 2008 at 10:12 am

I think it’s great what you’ve showed us. I’m already practising this one. Thanks >;)

Feb 24, 2008 at 4:52 pm

Great Menu and great tutorial… Thanks… :D

Sam Jennings
Feb 24, 2008 at 5:51 pm

Thanks for sharing

web pixy
Feb 29, 2008 at 2:26 am

I absolutely love the appearance of this menu, thank you for sharing the source and everything:) I will definitely use that, its so cool!

Mar 3, 2008 at 8:56 am

thanks for really good lesson!

Anton Shevchuk
Mar 3, 2008 at 10:49 am

Very nice article, I translate it to Russian, you can see it on this link

Mar 4, 2008 at 7:29 pm

Very nice tutorial! Thanks for all your dedication to writing tutorials, they are appreciated more than you know!

Mar 7, 2008 at 1:47 pm

really great post. . . i used it on my website:
I was wondering if there is a way to use the empty tag to also create
a:active and a:visited. I created new graphics with the 4 different stages in one graphic. Am I on the right track?

Mar 8, 2008 at 4:31 pm

hey. Your awesome web designer. Love the tutorial but how this css menu in wordpress?

Mar 10, 2008 at 3:49 pm

Very nice one!!!
But in case of a scaled browser the nav-links don’t stay on the positions they should be…any idea to fix this..?

Mar 13, 2008 at 9:28 pm

i don’t understand, what is the top property with a negative value (-20) in #menu .home span????

Mar 16, 2008 at 5:12 pm

at the beginning it seems hard for an amateur(this is me) but after solving all of it, you can see exactly what you done well.

Mar 17, 2008 at 3:09 am

yes, i am beginning and trying because i have this question so i need answer.thanks
Mar 17, 2008 at 5:43 am

wow this is absolutely gr8 tutorial. Thanx 4 sharing!

Jordan Burnett
Mar 21, 2008 at 12:47 am

Great technique.
Question: When I change the class=”home” to id=”home” in the anchors, it doesn’t seem the have the same effect. I’m changing the CSS as I do the HTML, but it doesn’t seem to work.
Any ideas?


Mar 25, 2008 at 1:15 am

thanks for really good lesson!

Apr 6, 2008 at 12:29 am

Great tutorial!
Are you planning on posting the IE JS fix in the future?
Looking forward to reading more of your tuts!



Apr 8, 2008 at 8:20 pm

Beautiful! Thanks!

Apr 10, 2008 at 1:09 am

gr8 tutorial. thanks 4 sharing…..

Apr 15, 2008 at 4:14 pm

Hi, thanks for this tutorial… I have being working at it all afternoon… and can’t figure it out how to make three stays down , over, seleected page… any tips…?

Apr 22, 2008 at 6:51 am

thank you, again

Apr 22, 2008 at 10:02 pm

Thank you for such a wonderful tutorial. I have been looking for a way to code this. Sweet !

Apr 25, 2008 at 9:52 am

Good stuff but unfourtunately it´s got some nasty bugs in IE6 =(

Real Estate Graphic Design and Marketing
Apr 30, 2008 at 12:54 pm

I’d also love the IE6 hover javascript fix. Otherwise I’ve applied your instructions with success at
May 1, 2008 at 1:20 am

WOW! This will definitely come in handy. Great Article

May 1, 2008 at 3:53 pm

great script!!… but it dont work with ie6 the nav pushes down the images bottom.. :(

May 3, 2008 at 6:24 pm

wow, I’ve been searching for this for about 30 min’s this seems to be the only place to find this tutorial. Awesome stuff, Thank you!

website design
May 5, 2008 at 4:12 am

Really nice site, of course goes to my bookmark list.

U should buy a licensed photoshop copy, but if you want 2 download, search about “torrentz” and read about them

Dharam Mali
May 6, 2008 at 7:15 am

Nice layout, Good Css, Nice design,

& Good work.

May 7, 2008 at 10:52 pm

what does it do in IE6? could they be fixed with a simple _hack?

Nick best
May 9, 2008 at 12:32 pm

Thanks for tip. it so beautiful.

M Rageh
May 10, 2008 at 11:37 am

What a wonderful tutorial. Thanks a lot.

May 11, 2008 at 9:40 pm

Excellent Work!!

May 12, 2008 at 9:11 am

really nice tutorial!

May 13, 2008 at 5:21 am

Wow!! Nice menu.
I will use technic to improve my menu.


May 14, 2008 at 8:33 am

Nice tutorial I think I might be using this in the future

May 15, 2008 at 10:54 am

This tutorial was brilliant – thank you very much!
I used this to help me build the menu on the website I just created for myself, thus I have addess a link from my website to this one – if the link works that is! I’m only a novice!

May 16, 2008 at 3:26 am

Thanks for the great trick

May 16, 2008 at 4:03 am

Nice website (bookmarked!) – fantastic tutorial! Detailed and throughout! Thanks a bunch! =)

May 16, 2008 at 4:18 pm

can i have the psd please ?

May 17, 2008 at 8:59 am

Thanks so much! I’m learning CSS and really appreciate the detailed info.

May 18, 2008 at 1:05 pm

Cool stuff! Bookmarked!

May 19, 2008 at 10:31 am

Excellent tutorial. Never knew the Copy Merged tool before – invaluable!

May 20, 2008 at 4:26 pm

Can menu navigation be designed within the sites header image or should the navigation have its own table with in Dreamweaver CS3? In order to design menu navigation with CSS, should I make a separate table for the header image and menu navigation?

May 20, 2008 at 11:11 pm

I just discovered your site and totally fell in love with it. I definitely refer to your site often. Check out my website, but it is in the works of being remodeled.

May 26, 2008 at 4:08 am

thanks, nice work :-)

Jun 1, 2008 at 7:34 am

cool css menu.
wow you have very nice template :)

plakali esanjor
Jun 2, 2008 at 4:12 am

Very good for me thanks

araba ilanı
Jun 3, 2008 at 6:56 pm

cool css menu.
thank you man.

Jun 4, 2008 at 10:28 am

great code..
only problem is in IE, I get a horizontal gap between the navigation and the next div tag . work fine on FF.. The gaps gets bigger the more li items I use.. Tried zeroing paddings and margins but this doesn’t help.
Any ideas anyone ?

Jun 4, 2008 at 6:06 pm

very nice. i will give it a try.

Jun 4, 2008 at 6:07 pm

nice one.

Jun 6, 2008 at 4:32 am

cool stuff..thanks for sharing! :)

Jun 8, 2008 at 9:22 am

excellent tutorial, stands head and shoulders above anything else I have seen. Tells me exactly what I want to know as clear as crystal.

This is an excellent web site, I love the design, hats off to you, inspirational… that’s from one who has been building sites since netscape 1 :-)

Jun 11, 2008 at 10:20 pm

very cool,I favorite it

Jun 14, 2008 at 6:29 am

Good Work. original!

Jun 16, 2008 at 7:24 am

Very good

Jun 18, 2008 at 7:16 am

awesome, thanks, this blog’s design is just amazing, just starting to browse other tutorials.. thanks

Jun 24, 2008 at 1:51 pm

Isn’t it great when ye find a good website, its like finding money in an old pair of jeans!! Quality tuts!!! Unfortunately im struggling with the IE bug. The thing is ive been teaching my self CSS over the last few days. So when you say put in a bit of javascript ….you kinda lost me! eh? anyhelp

kok hong
Jun 27, 2008 at 11:31 pm

Great tips, thanks for sharing = )

Jun 29, 2008 at 11:13 pm

Thanks for all tutorials

John Prine
Jun 30, 2008 at 5:29 am

Nice article! I shall try to use on the blog

John Prine

CSS Lover
Jul 3, 2008 at 4:43 am

Great article on css. It is great from customization point of view

grafik tasarim
Jul 15, 2008 at 8:13 am

css layer examples / properties and layer attributes

Jul 15, 2008 at 10:54 am

There is a way to get rid of the space below the menu in IE6:

Create a new .css file, I named mine ie6fixes.css. Then, copy & paste this in it:
#menu {
overflow: hidden;

Save and close. Then, open your layout file/header file, and place this between the head tags:
#!--[if lt IE 7.]#
#link href="ie6fixes.css" rel="stylesheet" type="text/css" media="screen" /#

# and # should obviously be , and if you named your css file differently, ie6fixes.css should be renamed ofcourse. This code will only apply to IE browsers older than IE7. I’m not sure this is the right way to fix this issue, but it’s a quick and simple fix so it shouldn’t be a problem :)

People Search Dude
Jul 17, 2008 at 6:39 pm

Nice article! I shall try to use it on the site I’m doing for my friend.

Jul 20, 2008 at 1:20 pm

Thakns you. and very good.

Jul 23, 2008 at 10:13 pm

could you please specify what particular javascript is it to fix the hover effect on IE6? Thanks… Good Job! I love it!

Jul 24, 2008 at 8:56 am

oh…. :D
100% good job!

saç dökülmesi
Jul 27, 2008 at 12:17 am

HI i need your help i really want to create my own website/web page but i dont know how to go about doing it so can you please help me out

Jul 30, 2008 at 4:30 pm

Great tutorial, I’m a complete css novice but this was easy to follow and tweak to suit my needs. A quick question: should the -900% text ident interfere with positioning the menu on the page? I seem to have to rely on absolute positioning coordinates, for example to center the menu next to an image at the top of my page.

Jul 30, 2008 at 11:21 pm

It seems like I’m having issues every time that my images swap from a non hover to a hover mode, they shift just slightly and it ruins the effect. I think it could be a photoshop error. Anyone got any ideas?

Jul 31, 2008 at 11:55 am

I appreciate this tutorial, but wanted to know about how the messages are display on the menu in this website

Aug 9, 2008 at 9:16 pm

Excellent tutorial. I’ve tried to follow a similar tutorial but had no luck completing it. This one’s even easier to understand. Kudos.

Aug 10, 2008 at 9:01 pm

Does anyone know how to have an active page “on state” show up rather than always coming up as the inactive state and losing where you are in a website
?????? please help!

Dinu / Switzerland
Aug 13, 2008 at 2:25 am

Nice :-), can you tell me which font you have used ? It’s a cool font.

Aug 13, 2008 at 9:18 am

What`s the font used in the RSS

Aug 16, 2008 at 1:39 pm

i tried to follow every single code u made, it displays vertical menu. Can somebody tell me how to change it to horizontal menu”?

Aug 17, 2008 at 5:05 am

Great tutorial, I’m a complete css novice but this was easy to follow and tweak to suit my needs. A quick question: should the -900% text ident interfere with positioning the menu on the page? I seem to have to rely on absolute positioning coordinates, for example to center the menu next to an image at the top of my page.

Aug 21, 2008 at 8:12 am

Its a great css. Great Job

Aug 21, 2008 at 8:13 am

Its really cool

Aug 21, 2008 at 10:53 am

very cool, i’m just redesigning my own site, and will use this..very cool thx

CSS Model
Aug 23, 2008 at 4:19 am

This is really a very good technique. Thanks!!!

Aug 27, 2008 at 9:14 pm

Doesn’t work on IE6

Aug 28, 2008 at 11:54 am

To B: isntead of complaining upgrade your browser !

Aug 30, 2008 at 2:05 pm

very cool indeed. must try. thanks

Phyu Mon
Sep 5, 2008 at 8:31 am

Wow! That’s an amazing tutorial. Thanks.

Sep 8, 2008 at 2:19 am


Sep 10, 2008 at 1:41 am

Nice technique, i would like to use this technique, but need the js fix.

@author – Maybe you could post the javascript fix?

@ant – poor comment, 25% of webusers i 2008 use IE6.

Sep 11, 2008 at 9:00 am

I also would like to see the js for handling the ie6 bug. I’m more of the designer and not so much the developer, so I’m sure I couldn’t write this myself. Can someone help…author or otherwise.


Sep 12, 2008 at 4:41 am

thanks for this Gide line

Danh ba web 2.0
Sep 19, 2008 at 8:32 am

Great tutorial ! Nice to meet you.
Good blog Design for me

Imran Salahuddin
Sep 21, 2008 at 5:07 am

great tutorial man.. thanks for yout help

Sep 25, 2008 at 2:02 am

Really nice tutorial, I simply love you’re site.

Regarding this css menu, how can I use the a:active on it? is it possible? anyone? :S

Sep 25, 2008 at 4:47 am

Nice tutorial!

Sep 28, 2008 at 5:57 pm

I just wrote all this out. Not sure if I understand it all yet but yeah, way cool. Man have I got a lot to learn. Thanks.

Oct 2, 2008 at 2:26 pm

This is a very elegent effect, but it falls flat without the MIE6 java fix. Anybody have any ideas as to where I can get this javascript fix?…Author perhaps??

Oct 4, 2008 at 10:51 am

Hey i like your style.

I use a similar technique but i don’t have any IE6 problems. What i do is put the nav word (Home/About/Span etc..) in the span tag and set display to none. Then to get the hit value for the link i just set the tag to width: 100%; height: 100%; display: block;

So then the fills up the tag and by setting display to block the whole cell becomes a hit area.

After that it’s just a simple task of moving the background image on :hover

I hope that makes sense


Oct 4, 2008 at 10:57 am

Sorry better post this twice because the html items didn’t show.

Hey i like your style.

I use a similar technique but i don’t have any IE6 problems. What i do is put the nav word (Home/About/Span etc..) in the span tag and set display to none. Then to get the hit value for the link i just set the <a> to width: 100%; height: 100%; display: block;

So then the <a> fills up the<li> tag and by setting display to block the whole cell becomes a hit area.

After that it’s just a simple task of moving the background image on :hover

I hope that makes sense


Oct 4, 2008 at 4:47 pm

Jake: so you are saying that these effects display as they should in MIE6 without resorting to hacks or javascript ?
If so, that’s great but being a newbie to both XHTML and CSS I’m tying to get my head around it all. I have done a search for the java script but most all tutorials assume guru status to begin with and so do not cater for newbies. And it seems that people are reluctant to give examples of the javascript on this blog. I am starting to believe that the javascript required to make these effects function correctly in MIE is some closely held secret :) So if hacks and javascript can be avoided by pure CSS then that would be fantastic. Would it be too much to ask of you to do a cut/paste of the actual CSS by way of example so I (and possibly others) can follow along ?
Any assistance would be most welcome.


Animals World
Oct 5, 2008 at 10:45 am

thanks for this

World of Flowers
Oct 5, 2008 at 10:46 am

Good blog Design

Oct 6, 2008 at 8:39 am

Hey Sam

I haven’t got IE6 running on my comps at home but i’m pretty sure the code works fine in it. If you check the navigation on some quick site i made a while ago and let me now if it works then i’ll put the code up or you can take it through firebug or something.

The site is:

If the navigation works in IE6 then that is done using a similar technique to the one in this tutorial but works in IE6 without javascript.

Oct 6, 2008 at 2:01 pm

Thanks a heap.
I tried the site and it works in MIE 5.5, 7 and beta8 but 6 makes a mess of it.
Back to the drawing board I guess :(

Oct 7, 2008 at 4:23 am

Hey Sam

Are you sure about that? I just checked the site on a comp with IE6 on and it worked fine… hmm weird! Are you checking it in that IE tester or an actual version of IE6?

Cheers Jake

Oct 7, 2008 at 4:38 am

Just like to say, what a well written tutorial! Well done.

So good in fact, I’ve just subscribed to your RSS.

Oct 10, 2008 at 3:38 pm

I have been doing the testing using “IETester” ( I will test in MIE6 next week via a friend, but you say that it is OK in MIE6 ! ….now that’s good news. I will experiment and get back to you…..BTW….your input is appreciated :)

Oct 12, 2008 at 1:29 pm

I used this CSS tutorial to create my new navigation bar in my new layout, thanks, this really helped! ^^

Oct 20, 2008 at 10:17 am

WOW…… thanks

dfs design www
Oct 22, 2008 at 4:06 pm

how ever, also you can make one image ex. for rss, and using background-position.

a.rss {background:url(‘rss.gif’) 0 0 no-repeat; display:block;width:30px;height:30px}
a:hover.rss {background:url(‘rss.gif’) 0 -15px no-repeat; display:block;width:30px;height:30px}


(remove the spacing)
with this U economically using the transfer, and images doesnt ‘jump’ on hover.

Oct 25, 2008 at 3:12 am

Thanks. Yes!….works OK in MIE6. The “tester” must be a bit buggy. I’ll study the code and use. Thanks a lot. :)

Oct 25, 2008 at 3:46 pm

can this only be used for the three navigation menus? I mean can i add more links, like contact, films etc?

Oct 26, 2008 at 7:03 am

Hey Sam

No worries. If you have trouble working out how i did it drop me an email and i’ll send you the code or somthing:

jake {at}

Sorry had to write it like that cos of spiders.


Oct 30, 2008 at 7:14 am

This is great,

Any idea how it could be implemented for wordpress & K2? can’t seem to work out how to get separate tags for each navigation link.


Nov 4, 2008 at 5:23 pm

great tutorial

reegarding from Łódź

projektowanie stron łódź
Nov 4, 2008 at 5:24 pm

great :)

MQ Hidayat
Nov 4, 2008 at 5:44 pm

A nice tutorial.
I’m ready to try.

Nov 4, 2008 at 7:46 pm

Great tutorial. Should be implemented soon to my site.

Nov 6, 2008 at 4:26 am

Thank you so much for the great tutorial.

web design nepal
Nov 16, 2008 at 12:12 am

Its good tutorial. thank you for such …….

Nov 25, 2008 at 6:19 pm

I tried making a larger menu with this technique but once i add more than three buttons, they automatically skip to the bottom-left of the menu in plain text

Dec 4, 2008 at 3:23 pm

I think it would be better not to use the span element. I always try to avoid additional markup for design purposes only. I reccomend using a single image file containing all the relevant information.

Carlos Hermoso
Dec 18, 2008 at 8:39 am

You might want to visit my site to find out how I use my advanced CSS menu:

Dec 26, 2008 at 3:25 pm

cvnjakglhapehwmswell, hi admin adn people nice forum indeed. how’s life? hope it’s introduce branch ;)

Dec 30, 2008 at 1:57 pm

Great tutorial! thanks!

Jan 3, 2009 at 2:27 am

不错 我用了

Jan 5, 2009 at 3:22 am

thanks~~ nice~~

Jan 7, 2009 at 12:09 pm

i finally got it! thanx!

Jan 12, 2009 at 5:30 pm

it`s good tutorial.!! thanks for you help.!
thanks for sharing your knowledge :)
thanks. =)

Jan 13, 2009 at 7:45 am


Ganesh Badgujar
Jan 13, 2009 at 7:47 am

very nice

Jan 16, 2009 at 4:54 am

Really nice menu, it helped me with mine xD

Keep up the good work

Steve Tchorzewski
Jan 22, 2009 at 5:48 pm

I have been using this simple sliding menu solution on my sites for a while now. It’s really a great solution. But I also like the son of sucker fish menus, I use have used them on my portfolio website, and a bunch of others.

Jan 29, 2009 at 7:23 am

Awesome tutorial! Thanks for sharing.

Feb 4, 2009 at 6:04 am

tks for sharing it ;)

Feb 6, 2009 at 11:10 am

Thanks, man keep ’em coming.

izmir web tasarım
Feb 7, 2009 at 1:37 pm

greate menu thanks
good post

Joshua Rapp
Feb 8, 2009 at 5:57 pm

I’m using the Avanced CSS Menu method for the nav-menu on my site. I got the images to finally show up the only problem is that the menu itself is shifting to the left. I’ve racked my brain over a solution. and cannot figure it out. I’m sure it’s something very simple. I am using a tabled design:

Contact Us

Is there something fundamentaly flawed with the design?

Feb 9, 2009 at 6:12 pm

thanks a bunch for this tutorial, really helpful!!

everything worked out perfectly, but I wanted to also add the same effect as when in hover, to when the user is reading a page, thus I tried the following code:
#menu a:active {
background-position: left bottom;

and also tried this:
#menu a:hover, #menu a:active {
background-position: left bottom;

and it didn’t work :( — still once I’ve clicked on a page, it goes back to the regular button, without staying in the effect.

ANY SUGGESTIONS ANYONE??? something I might have missed?

Sudeep Tamrakar
Feb 12, 2009 at 5:53 am

Thanks for the useful menu sample.

Feb 14, 2009 at 3:57 pm

very good, thanks

Feb 17, 2009 at 2:51 pm

It works! thank you!

Lasitha Silva
Feb 20, 2009 at 1:00 am

I was looking for ideas where I found this masterpiece full of ideas for my new student website. Ideal for students and new web developer to bloom their potential. Keep it up and share.

Feb 23, 2009 at 5:24 am

Are you gay my fiend liam dixon thinks that your mums fanny smells like the sawers.

Feb 25, 2009 at 7:45 am

It worked perfectly! I’m just a little concerned about the IE6 bug. I can’t seem to find the javascript fix anywhere and I’m pretty clueless when it comes to that. Any help would be much appreciated. If someone could point me in the right direction (or provide me with the code) I’d be very appreciative! Thanks in advance for your kindness!


James Mann
Feb 27, 2009 at 3:50 am

Hey guys, looking at this nav menu you have going on here, and also looking at the code, my general impression was that ‘wouldnt it have been far more easier to have build that nav in flash so the circles around the tabs animates around’. Then you could have linked up each tab to its respective page. Im not sure what Google’s situation is at the moment about reading swf files for key words, but you can type in a description of the tabs so it may be read and optimised by Google. Also, if you are not happy with that, you can add the nav to the sitemap in the footer of your site and get Google to read it that way, that way you have not compromised on the search engine optimisation of your web site.

Just a thought.



Carlos A.
Mar 3, 2009 at 10:30 am

Great Tutorial!!! Thanks. I do have one question. After saving my css to my site folder, my images linked to my css did not display onto other html files. Shouldn’t each page with the linked CSS display my nav setup properly?

Mar 4, 2009 at 3:07 am


Luciana Morin
Mar 4, 2009 at 3:57 pm

thank you so much for the tutorial!
i’m using the menu here:
and i credit it, don’t worry :)


ortak miras
Mar 5, 2009 at 4:51 am

Thank you. Great…

Mar 6, 2009 at 8:08 am

i want know more

Fahad Ahmed
Mar 6, 2009 at 4:34 pm

Can you tell me what the font you are using for this. I really like this font.

Fahad Ahmed / Fahdi

Mar 9, 2009 at 3:11 am

Wow, it’s so wonderful! Thank you!

Mar 9, 2009 at 7:57 am

Thanks for the tutorial! I´ll try it in my next layout! =)

Mar 15, 2009 at 11:39 pm

stumbled across your site. Glanced through this tutorial. Jaw dropped. Hit floor. Great work! Love the creative way you are doing things. I have bookmarked and shall return. Thanks for inspiring us!!

Mar 18, 2009 at 1:47 am

thank you,it’s very useful

Mar 18, 2009 at 12:01 pm

Great tutorial.
Selected method used?

alberjito (:
Mar 18, 2009 at 6:32 pm

i’m from perú, this tutorial is cool, and so better is your site, i’d like to do things like this in the future, i’m only a programmer, but i’ll learn anyways ^^

You’re great (:

Mar 23, 2009 at 7:15 am

Awsome Dude…

Martin Miranda
Mar 23, 2009 at 8:27 am

thanks for this CSS Sprites tip

Mar 24, 2009 at 4:12 am

really helpful and thanks for the sharing :)

Mar 26, 2009 at 1:54 pm

Don’t understand the coding (block,menu span, lists,…), I think I’m gonna do it in actionscript..

Apr 1, 2009 at 11:07 pm

Good job man !!!

Creative and simple !!


Apr 2, 2009 at 12:01 pm

nice tut man … very useful!

Apr 7, 2009 at 4:12 pm

thanks mate. you are legend. I looked all over the net for an example like this and finally – this is so easy as well as creative and free! great job. thanks a lot from Istanbul!

Apr 10, 2009 at 10:31 am

hi! I write from italy and my English is not good …your tutorials are the best, I am learning by reading these. I’m building a WordPress theme, and now I read this post but I have a problem. I installed WordPress Locally. In preview (by dreamweaver) my page is perfect, but if I move the mouse over the text the span effect display in another part, not on the text. after clicking with the mouse the effect is perfect…why?

Apr 12, 2009 at 12:25 pm

sorry…I solved the problem of the previous post!
effect in the WordPress Locally preview is ok…but I still have not found the right code for the menu, I tried with but the effect does not appear…can you help me?

Apr 16, 2009 at 8:56 pm

Why do you need the span?
I’ve only glanced at the code but it looks unnecessarily complex and the spans seem useless. You can use a:hover to get the effect and the extra images are useless too. You could just create a single image for the entire menu and clip it with css. Okay so you the the little text as a separate image why? you can just put it on the hover image. All seems stupidly complex and wasteful

Apr 19, 2009 at 2:50 pm

Thanks very much for this. I’m just beginning to get to grips with CSS as layout and this has been invaluable for my latest project. Kudos to you.

Apr 19, 2009 at 3:55 pm

It’s a very nice tutorial- very useful Thanx!

Apr 22, 2009 at 4:15 am

thank you!, thank you, thank you! just like the one i’ve looking for.

CgBaran Tuts
Apr 25, 2009 at 12:15 pm

Nice tutorial thanks

Apr 30, 2009 at 6:42 am

I tried using this in a vertical arrangement (as opposed to your horizontal). It works flawlessly in Firefox, but in IE when you mouse-over a link, the links below it all jump (or shift upward) slightly. The link on the very bottom of the vertical column of links is fine because there is nothing under it to “jump”

Is there a way to prevent this from happening in IE?
Thanks for your help and thanks for the wonderful tutorial you have provided.

Apr 30, 2009 at 6:57 pm

very nice site.. ilike so much

May 12, 2009 at 5:37 pm

Dudez KICK butt job nice. Lik the site for the lines of the blue. I wet in italy.

May 19, 2009 at 6:28 am

man, this tutorial rocks!! only I have one problem :(

I did everyting what I should do, but when I open the site in IE the rolover doesn’t works! :'( in chrome firefox etc. it all works perfect, but not in IE!

can annyone please help me???

web design leeds
May 20, 2009 at 3:11 am

very nice tutorial! thanks alot, cheers.

May 25, 2009 at 3:06 pm

Thanks. I’d like to see more explanation about some things on CSS (like why display:block on span). But that’s fine.

May 26, 2009 at 1:47 pm

great tutorial!! Thanks

May 29, 2009 at 11:56 am

Thank you so much for this tut! I was able to customize and create a fantastic menu of my own.

May 30, 2009 at 12:50 am

This is such a great tutorial! Now I practically use it whenever I need to hover a picture. However, there’s one little thing: how would you CSS the active tag?

Thanks for any help.

May 30, 2009 at 5:12 am

Very beautiful style, I very like it,Whether you can share this the themes?

Jun 3, 2009 at 1:52 pm

This is AWESOME. I have been looking for this Tutorial for a very long time.

Jun 4, 2009 at 6:42 am

yb rt rt rtreterte trt tretrtertertertr

Jun 15, 2009 at 8:36 am

thank….i really need it….

burlesque performer
Jun 17, 2009 at 5:25 am

Top Post!.. wonderful tips there.. love the whole site!

epc london
Jun 17, 2009 at 5:30 am

this tutorial is perfect

Jun 17, 2009 at 3:22 pm

Hello, great menu, I can’t get this to work :(
If anyone is intrested in helping me, please send me an email.
My problem is: I can only see the three links in Home About Rss
And then: #menu { list-style: none; padding: 0; margin: 0; width: 774px; height: 210px; background…
This is just a very small part of whats failed.
Please help me and tell what I am doing wrong.

Jun 17, 2009 at 3:24 pm

btw my email is [email protected]

AdWords Optimierung
Jun 18, 2009 at 4:09 pm

This is AWESOME. I have been looking for this Tutorial for a very long time. - freelance designer
Jun 22, 2009 at 9:54 pm

very useful for designers, thanks for sharing.

Jun 24, 2009 at 11:59 am

thank you for this article! it really helped me in doing my project! hope you continue to post more techniques regarding css:) Godbless!

Jun 27, 2009 at 5:34 pm

Thank you for this tutorial, awesome website.

Edy Pang
Jul 1, 2009 at 9:08 am

Thanks, It’s really nice tut

Jul 16, 2009 at 3:20 pm

Hi, this is really a great menu!

A point I don’t understand at all, why empty would work? Please advise. Thanks!

Jul 16, 2009 at 8:21 pm

For some reason, I can only get this method to work for up to 4 links…anyone else having this issue?

Website Designer Katy TX
Jul 16, 2009 at 11:40 pm

Thanks for this. I really like the idea. I believe it is important to see what other designers can come up with. Gets your design mind going. =D

Jul 18, 2009 at 11:19 pm

nice menu for web devlopment

Igo Medeiros
Jul 22, 2009 at 4:10 pm

Bonito menu que construiste.
Mas ele foi testado em quais tipos de navegadores ?

Igo Medeiros
Jul 22, 2009 at 4:12 pm

Só ajeitando o meu e-mail
enviei de novo ele

Jul 22, 2009 at 5:46 pm

Hi, thank you, very well this menu!

Jul 25, 2009 at 1:30 pm


This tutorial is so great, eventhouh I don´t get all of it.
It is the photoshop-part I don´t get (Main background & Button graphics).
Is it possible for you to explain it a little bit more, if not here then, please, contact me??

Jul 28, 2009 at 8:29 am

nice trick !!!
thanks !

Jul 30, 2009 at 3:24 pm

many thanks for your menu! Loving it.

Aug 3, 2009 at 3:43 pm

Okay, just a little question: is it possible with your menu to include a submenu and if so, how is that done? Hope that you can help me!

Aug 12, 2009 at 1:57 am

Thanks for this. I really like the idea. I believe it is important to see what other designers can come up with. Gets your design mind going. =D

Aug 29, 2009 at 1:21 pm

i can’t find the photoshop file inside the zip

Sep 2, 2009 at 7:07 am

this is great. Thank you. Just a question. Is a drop down menu possible from this? how?

thanks man.

Sep 4, 2009 at 9:40 pm

This make me think of my site navigator. I just forgot this method. Thanks

Jayadev G.
Sep 7, 2009 at 5:25 am

Very good menu style…….

Sep 7, 2009 at 7:20 pm

Great stuff works nicely. More tutorials like this please!

Sep 10, 2009 at 7:36 pm

nice trick !!!

Sep 10, 2009 at 10:46 pm

so cool!!!!!!

Sep 13, 2009 at 9:51 pm


Sep 20, 2009 at 1:17 am

best of the navigation menus i have seen

Elver Lego
Sep 20, 2009 at 8:55 pm

Nice post! It really help a lot… Keep it up! =D

Sep 21, 2009 at 9:59 am

Great , Advanced CSS Menu
Great article. CSS saved web design

Sep 26, 2009 at 5:24 am

Why can’t I do Edit > Copy Merged (Cmd + Shift + C) with About Home etc??

Oct 3, 2009 at 6:55 pm

Awesome tutorial, thanks!

Oct 4, 2009 at 4:26 pm

Hi, I used this tutorial to create my CSS rollover [minus the span], but it won’t work on wordpress…please help, anyone!! :((

Oct 4, 2009 at 4:52 pm

Nevermind. I was able to fix this, thank you so much :)

Oct 7, 2009 at 4:56 pm

Great tutorial, Well explained and nice finishing. Thanks for sharing this nice tutorial.

Luis Alejandro González Miranda
Oct 9, 2009 at 9:14 am

I don’t remember ever having visited a website with such a cute design. It’s so beautiful.

I’ve known this one since quite a while, but I have never had the time to exploit it. If anything, your tutorial and this site has given me motivation to putting my hands back to work.

Oct 14, 2009 at 1:24 am

so cool!

Oct 18, 2009 at 11:12 am

so great……………

I love css

Oct 20, 2009 at 10:37 pm

cooool, learning, Thanks a lot!

Oct 26, 2009 at 9:02 am

so cool! Learning···

Oct 28, 2009 at 12:22 pm

excellent tutorial…….bravo

Oct 31, 2009 at 4:26 am

Cute effect. I like it

Nov 2, 2009 at 1:44 pm

Still having problems with this in IE6, has anyone found a solution for it? Im not entirely sure where to find this javascript fix.

Emad Navy
Nov 3, 2009 at 2:26 am

Like usual, WebDesignerWall provide the best and “right to the point” articles. Thnx.

Thisara De Silva
Nov 4, 2009 at 6:19 am

hi there, its really creative…. i want to thanx who add this tutorial :)
to see what i made :)

thanx again!

Nov 9, 2009 at 9:59 am

Really nice tutorial!!!

Nov 11, 2009 at 4:42 pm

يعطيكم العافية حتى لو مافهمتوا لغتي ..

اطيب تحية ..

Nov 13, 2009 at 6:54 am

Nice Article. Thanks!!

Nov 19, 2009 at 7:02 pm

Love it! Thanks for sharing :)

Nov 21, 2009 at 7:08 am

very cool ,I like it .

Nov 24, 2009 at 1:14 am

This’s very good!
I like it

Nov 25, 2009 at 9:27 pm

Cool idea! I like it,thanks for share.

Nov 27, 2009 at 2:06 am

really very nice@@@

Dec 2, 2009 at 6:28 am

Quite elaborated and informative tutorial.

But i must say that has done a superb job for me. Since I did not have time to convert the design my self I outsourced it to them and what they delivered was just mind blowing. Great code quality and that too in just 8 hours.
I would recommend to try them at least once. You will be amazed with the code quality.

Werbeagentur Siegen
Dec 2, 2009 at 7:40 am

I love it – thank you for sharing.

Werbeagentur Siegen
Dec 2, 2009 at 7:41 am

Nice Article. Thanks for sharing.

Dec 11, 2009 at 10:23 am

Thanks a lot! Really useful technique that I can use in lots of other situations as well.

Dec 11, 2009 at 6:07 pm

Has anyone got this to work in explorer 6?
The hover state and transparency doesn’t work…

Dec 14, 2009 at 12:57 pm

Jeez, this stuff hurts my head! Will have to learn a lot to make my site look good. Thanks for sharing!

Dec 21, 2009 at 5:27 pm

Wow I just found this when searching for some great wordpress design tips. Will be checking often, great info.

Jan 4, 2010 at 9:07 pm

Would it be alright to do this in Gimp 2.6 instead of Photoshop? Would I get the same result?

Jan 4, 2010 at 11:43 pm

Is there a way to convert this into a drop down menu? I used this tutorial to create a menu but a few of my items need dropdowns to go along and I cannot figure out how to make that work.

Jan 5, 2010 at 11:29 pm

The designs showed here show what simple and tasteful design is all about. Another one to consider

Jan 12, 2010 at 4:24 am

Nice Article. Thanks for sharing.Quite elaborated and informative tutorial.
But i must say that has done a superb job for me. Since I did not have time to convert the design my self I outsourced it to them and what they delivered was just mind blowing. Great code quality and that too in just 8 hours.
I would recommend to try them at least once. You will be amazed with the code quality.

Jan 12, 2010 at 7:26 am

Very helpful one…thank you for sharing!

Jan 13, 2010 at 9:48 am

I just wondered why have the descriptions as a separate image and not part of the roll over state? if you reversed the order in which you position the graphics you could achieve the same thing?

Jan 17, 2010 at 11:14 am

wow.. i like this

Jan 20, 2010 at 3:01 am

it’s great!

turismo china
Jan 29, 2010 at 1:37 am

Very helpful to me,thank you for sharing!

Tom Koel
Jan 31, 2010 at 7:36 pm

I used your advanced CSS menu for a footer as well. I’m a super novice. Seems to work great until I try to control the position of the header. If I make the header absolute (say at 1100), my footer pics wind up another 1100 px below. I don’t mind a relative footer, but I’ve got a self-made background that I must use and I can’t get it to trim up to the relative bottom of the page. Maybe that would be easier. Whatever you could offer for help would be great. Thanks.

Feb 17, 2010 at 9:47 pm

beutiful,Thanks for your tutorial

seo ceylon
Feb 20, 2010 at 9:46 am

I like learn seo,and u like learn seo come my site ads learn more

Feb 22, 2010 at 2:46 pm

thanks for the tips. I trying to make my site with wordpress. thanks, john

Mar 3, 2010 at 2:45 pm

some sentences, but in general did not exactly turn a nice and helpful article. Thank you and good work.

Mar 5, 2010 at 6:18 am

I have a major problem with the menu. It doesn’t show the menu at all ? who can help me out ?

nike free 3.0
Mar 10, 2010 at 10:44 am

nike free 3.0 sale

Jose Diaz
Mar 10, 2010 at 9:04 pm

I’m trying to use your tutorial and code as guide lines for my website but i can’t make it work properly, i would really apreciate it if you could help me out, i think i have most of the code right but then again you’re the teacher here so if you want i could even send you my css and html for you to check. please let me know and send me and email if you are willing to help me. THANKS

Mar 12, 2010 at 9:23 am

Muh this is how i work test

Mar 17, 2010 at 2:19 pm

helpful article. Thank you and good work.

Mar 24, 2010 at 8:10 am

I wonder if anyone could tell me how to do that effect when you press the “View Demo Css Menu” the background fades out and the demo sits on top until it closes. Is it done only with CSS as well or is there some other language involved? If someone would tell me how this effect is called it would be very helpfull. I have seen this before and I think could be very good for a picture gallery I am thinking of building.

Mar 24, 2010 at 8:57 am

Jose Diaz, whats your email address? You can then send me your files to look at.


Mar 24, 2010 at 8:58 am

Attn: JC

It is done by using thickbox.js (javascript) with a subsequent class=”thickbox”


Mar 27, 2010 at 12:30 am


Apr 9, 2010 at 10:19 am

Thanks Chopper, I really appreciate it

échantillon gratuit
Apr 13, 2010 at 2:57 pm


Apr 14, 2010 at 6:09 pm

I just want to say thanks for this tutorial. I have tried soo many different CSS scripts to get this mouseover menu effect to work for my WordPress-ran Web site and none of them have worked thus far. Yours worked like a charm! Thanks so much!

Emilio Jéldrez
Apr 17, 2010 at 2:10 am

dude, you’re great!
really helpfull!
cheers from Chile!

Web Design Maidstone
Apr 19, 2010 at 7:04 pm

Cool menu!

Ashok dausa
Apr 21, 2010 at 6:01 am

I wonder if anyone could tell me how to do that effect when you press the “View Demo Css Menu” the background fades out and the demo sits on top until it closes. Is it done only with CSS as well or is there some other language involved?It is done by using thickbox.js (javascript) with a subsequent class=”thickbox”

xHTML CSS Web Design Course by Learnpact
Apr 22, 2010 at 9:46 am

Css menu design never so fun! i loved it

Apr 27, 2010 at 3:43 am

thanks for this tutorial.
See below link for more professional top page rank tutorials(HTML/CSS, Jquery, Photoshop,Flash,PHP etc)

Web Design
Apr 28, 2010 at 8:31 pm

very helpful.thanks bro!!!

May 1, 2010 at 6:42 am

How do you get this to work on the Blogger (google) platform? Where do you put the code? I tried copying and pasting all the code you posted in the widges (html) section, and when I tried it out, all I saw was the html code on my blog.

Can you tell me exactly where to put all of this html code? I would love to use this, but as of right now, I have no idea how! Please help.

May 1, 2010 at 9:35 am

hi this is great tutorial, do you also have a tutorial how to implement this to wordpress with active state?

May 3, 2010 at 11:29 pm

awesome!!!!!!!!! ^0^

May 11, 2010 at 2:38 pm

Why wouldn’t you just create a navigation sprite and move everything with background positioning? This seems like a lot of work for a simple navigation.

May 25, 2010 at 12:49 pm


this is great for me,….

May 29, 2010 at 7:24 pm

Hi there. You mentioned I can use Javascript to fix the IE bug. Can anyone tell me how I would go about that?

Jun 13, 2010 at 7:51 pm

HAHAHA DSL 16.000 3sec LADEZEIT fürs
background-image: #haha url(“”) no-repeat;
alterschwede stellt euch mal vor das müssten png’s sein weil die quali von gif’s nicht klar geht ;D

In diesem sinne “VERBIETET Modem/ISDN und Bauern-DSL”

Jun 14, 2010 at 5:17 pm

I have copied the css code in my website.
Then I copied the code into my website.
Nothing happens when I look, I seen you’re background but not the buttons. What happened?

php programming
Jun 19, 2010 at 5:46 am

hi this is great tutorial.great work

Andreas Lüneburg
Jun 23, 2010 at 2:13 am

nice post and very interessting informations

carrie s
Jun 25, 2010 at 12:32 am

great tutorial … It’s always good to know how and why something works instead of just copying codes. thank you!

John D.
Jun 25, 2010 at 9:25 pm

I used this tutorial at my user group to demonstrate the elements of navigation styling. Thanks for an interesting approach. The meeting went very well.

Jun 28, 2010 at 4:45 am

nice one! thx for the tutorial! :D

Jul 8, 2010 at 12:41 pm

Nice tuorial. Thanks for posting.

Jul 9, 2010 at 8:58 am

thank you ,
I download you program.

vanni linux
Jul 10, 2010 at 4:46 am

Thanks for sharing this .. i book marked it .. keep it up.

Jul 16, 2010 at 11:55 am

Hi, i like your tutorial. But i have problem doing it. Because it look complicated. I am using Sharepoint designer 2007, and i am not sure how do i apply…Can anyone help? ^^

SEO Sri lanka
Jul 21, 2010 at 2:40 am

Love it! Thanks for sharing

Kanyakumari Budget Accommodation
Jul 22, 2010 at 12:45 am

Thanks for sharing………………….It is useful tutorial. Can you provide tutorial for develop a testing tool in Php? I am waiting for your reply.

Thanks in advance!!!!!!!!!!!!!!!

Cheap Hotels Kanyakumari
Jul 22, 2010 at 2:16 am

Its very useful tutorial and i download this link.

Jul 23, 2010 at 9:22 am

great article. Thanks for sharing.

Jul 23, 2010 at 11:33 am

Thank you so much for this tutorial. I’ve spruced up my site with a slightly more complicated version than the example on my site. Thanks so much for your help! I love this site.

Jul 24, 2010 at 9:02 pm

very good tutrial and so nice blog。

Web free fonts
Jul 28, 2010 at 12:03 am

Cool tuorial. Thanks for Sharing

computer programming tutorials
Aug 7, 2010 at 6:58 am

Thanks for sharing such useful information.

computer eBooks
Aug 7, 2010 at 6:59 am

This one is really awsome.

Aug 9, 2010 at 12:31 am

the most coolest and awesome website i ever found on the net!!!!! everything here is simple, clean and alot functional!!

Lorem Ipsum
Aug 21, 2010 at 2:10 am

Hmmm, no doubt, really a nice tutorial. It will helpful for web designer. One great information is got from the bottom of this tutorial to fix IE6 bug using js. I spoiled a lot of time to solve css hover problem, but did not from none of where. Thanks for providing important article for us.

web tasarım fiyatları
Aug 22, 2010 at 4:59 am

Very nice indeed.. I love the whole freestyle feel to it. It doesn’t feel so, bland. Cool idea.

Sep 1, 2010 at 12:47 am

cool idea! it is great

Sep 5, 2010 at 2:36 pm

Thank just what I wanted

Kak Abbas
Sep 6, 2010 at 5:20 pm

It is helpful to me, big thanks!

Sep 9, 2010 at 10:52 am


Blenheim Web designer
Sep 9, 2010 at 7:49 pm

Perfect, thanks… Exactly what I was looking for. I was forgetting to indent the text to hide it. Wish I had found this earlier and saved some time

Sep 13, 2010 at 5:43 pm

thank you for this really nice design !!!

Sep 16, 2010 at 6:41 am

very good tutorial i just wanna know how to make the hover effect glow ? and thanks for your great work

Sep 19, 2010 at 7:21 am

Thanks , this is a great article.

Sep 21, 2010 at 1:28 am


Sep 25, 2010 at 12:36 pm

could you please show the Javascript code to specify the to display block on mouseover?

Sep 27, 2010 at 8:10 am

Wow! It is such a nice example. Thank you for your excellent tutorial. (^O^)

Oct 8, 2010 at 10:17 am

Great work. thanks. this is what I wanted.

Oct 12, 2010 at 4:55 am


Oct 19, 2010 at 10:51 pm

Very beautiful and creativity!I like it !

Oct 23, 2010 at 4:15 pm

Great Tute! I’ve being hunting round for a clean example like this.

El garch
Oct 25, 2010 at 4:26 am

thx for this nice tutorial, keep posting you’re doing a great job ^^

Niels Heurlin
Oct 28, 2010 at 10:36 am

This isn’t CSS, more a tutorial for Photoshop. This is possible in CSS, and think it’s wrong and sad that you – with that headline – can’t make this. If you talk about CSS, you may mean for beginners not “advanced”

Oct 28, 2010 at 7:31 pm

Well done!

Brett Widmann
Nov 1, 2010 at 9:49 pm

Great tutorial. Thanks for sharing.

Nov 5, 2010 at 2:24 pm

Awesome teach us master :)

Nov 14, 2010 at 4:11 pm

Thank you ! Just what I needed :)

Nov 24, 2010 at 6:50 am

Second hit from Google with “css image menu” and this is just what I was looking for… Thanks! =)

Paul @ Best Blogger Templates
Nov 29, 2010 at 9:16 am

Nice menu and well explained thanks.

Dec 2, 2010 at 4:40 am

that is great…………………very nice………………..

Carrie Lepera
Dec 15, 2010 at 2:13 pm

Can I have a word of tips? I’m sure youve got anything fantastic around here. But suppose you supplied some links to an internet site which supports what you are? Or even it’s possible you’ll provide us some further material to evaluate, anything that will connect what you have been mentioning, a little something alot more concrete?

Dec 18, 2010 at 7:52 pm

great job :)

Heyzeus dechriste
Dec 19, 2010 at 6:13 am

ball massage, tickle left>>> insert quarter .,… press 4 then # for finale

Dec 20, 2010 at 4:22 am

Your article’s resource box should help to persuade your readers. No matter how amazing your article is if it’s not succeeding in driving traffic to your website cheap uggs

Dec 20, 2010 at 11:10 am

Awesome, thank you!

Henry Peise
Dec 24, 2010 at 2:32 am

Want to make some change to your iphone 4? white iphone 4 Conversion Kit will be your best choice! Come and try on!

Juno Mindoes
Dec 25, 2010 at 1:37 am

I love iphone 4 white, and i will keep focus on it. But when will it really release, hmm let’s see.

Dec 26, 2010 at 4:08 am

this css tutorial i like this and it realy help me thanks for that.

Robert Norgren
Dec 31, 2010 at 8:46 am


Has anyone experienced difficulties when the link points to an anchor?


Jan 10, 2011 at 1:46 am


Uçak Bileti
Jan 11, 2011 at 3:10 pm

kendimden çıktım yolaaa

Uçak Bileti
Jan 12, 2011 at 5:26 am

geciyor zalim sevgilim ağlanacak bu halime

Jan 13, 2011 at 9:53 am

Excellent article! If you want to see menus, web site trends, galleries, free extension and job for freelancers etc, visit , you have online demo and free download. Bye!

Jan 16, 2011 at 8:38 pm

Thanks !!! Very usefull !!

Jan 18, 2011 at 4:35 am


Freelance webdeveloper
Jan 19, 2011 at 2:52 am

Any way to create css using oblong size without image for button purposes?


Jan 22, 2011 at 11:51 am

how to fix this for Safari? In IE it works nice, in Safari it doesn’t.

tütüne son
Jan 29, 2011 at 3:54 pm

this css tutorial i like this and it realy help me thanks for that.

formula 21
Feb 1, 2011 at 4:33 am

Any way to create css using oblong size without image for button purposes?


formula 21
Feb 1, 2011 at 5:12 am

Thanks !!! Very usefull !!

altın çilek
Feb 2, 2011 at 7:26 am

Thanks !!! Very usefull !!

Feb 2, 2011 at 1:32 pm

Thanks for these beautiful navbars its wonderful

Feb 3, 2011 at 5:43 am

Thanks !!! Very usefull !!

Feb 4, 2011 at 7:14 am

Any way to create css using oblong size without image for button purposes?


Apr 8, 2011 at 9:28 am


شات صوتي
Feb 8, 2011 at 6:11 am



Khalid Majid Ali
Feb 12, 2011 at 3:53 am

Great tutorial, loved it so much that I used this technique on my website. I’d like to share that the IE6 bug where the hover effect does not display properly, can actually be fixed using CSS. All we need to do is use the visibility property instead of the display property for the #menu span. Something like this.

#menu span {
visibility: hidden;
position: absolute;
#menu a:hover span {
visibility: visible;

Using the visibility property will make it work in every browser, including the buggy IE6.

Feb 23, 2011 at 4:23 am

Thanks It’s very usefull

Jennifer Rush
Feb 23, 2011 at 12:20 pm

Awesome tutorial. Can’t wait to try out different images on the menu. Thanks!

Feb 23, 2011 at 12:51 pm

rapid prototypes

Katja Turnsek
Mar 2, 2011 at 2:41 pm

Great!! I love this!
I have a question: How do I create a “current” link in the menu?


Magento shop
Aug 27, 2011 at 5:17 am

Thanks a lot for this post! It realy helping me out a lot!

Mar 2, 2011 at 4:34 pm

Thanks, nice tutorials!
Very Helpful!

Mar 4, 2011 at 4:34 pm

Thanks very nice CSS tutorial for Magento en Magento webshops i think this is…useful for a lot of people i think!

Bookmarked for further use..

ALI ASGHAR(persian)
Mar 10, 2011 at 4:11 pm

Thanks for this tutorial

How To Get Taller | How To Put On A Condom
Mar 17, 2011 at 5:04 pm

Advanced CSS Menu article cleared my confusion. Thanks.

How To Put On A Condom | How To Get Taller
Mar 17, 2011 at 5:05 pm

Thank you for the in depth teaching on how to slice up the menu design (step by step). Amazing!

Mar 25, 2011 at 12:05 pm

Thx. Nice work

Apr 17, 2011 at 1:55 pm

Excessive fear, anger, and work under stress last pregnancy, infants can lead to excessive hassaslığa. Intense emotions, going through the mother’s blood circulatory system and brain functions that affect the baby in some leads to the release of chemical

Apr 22, 2011 at 3:36 am


Pinkie G
May 2, 2011 at 12:53 am

Awesome tutorial, I started working on a menu last night and managed to finish THAT part of the design I was working on. Thanks a ton :)

May 27, 2011 at 2:52 pm

just doing a test reply to see how it looks like in this theme. :D

May 20, 2011 at 5:34 am

css menu

Ruchi Garg
May 27, 2011 at 6:27 am

sb kuch bakwas

Jul 15, 2011 at 10:30 am

Bakwas kese ?

Shakita Tartt
May 27, 2011 at 11:46 am

I wished to say that it’s pleasant to learn that a different person also brought up this as I found a tough time locating exactly the same facts in another place. This was the first site that shared with me the answer. Cheers.

May 27, 2011 at 2:51 pm

great tutorial! just what i’m looking for. :)

Btw, after doubling the canvas height, the image on the layer and its duplicate remains on the middle. So I should move both manually up and down, right? Or is there an easier way so that both images on the layers are positioned precisely where they should be?

May 31, 2011 at 12:53 pm


In photoshop when you adjust the canvas size the image will stay centered by default unless you specify its anchor point: click the arrows below the size settings to add the additional size to any specific edge of your image. Hope that helps.

Jun 2, 2011 at 6:07 am

Ohhh! Got it! So that’s the purpose of the arrows in there. Thanks Michael!

Navneet Saini
May 30, 2011 at 6:29 am

Very good tutorial and example.
Thanks for submitting it on your blog it is very help full

Thanks again

Jun 1, 2011 at 7:42 pm

Best tutorial for horizontal buttons in css I’ve ever seen online!

Jul 3, 2011 at 11:23 am

Thanks for this tutorial. I’ve learned a lot from it :-) Thumbs up and hope to see some more in the future.

Pattaya Seafood Restaurant
Jul 7, 2011 at 10:16 am

Wow, very nice menu design. I used something similar to this on my website. Thanks.

Jul 21, 2011 at 12:47 am

Well said thanks can u suggest a attractive menu for my website it will be very helpful to me

Jul 28, 2011 at 8:46 am


طراحی وب سایت
Jul 29, 2011 at 12:34 am

Best tutorial!thanks

Aug 11, 2011 at 6:33 pm

I hate how undynamic menus like this are, but it’s definitely the way to go for a stunning look. Nice & simple tutorial.

Aug 16, 2011 at 4:20 am

Awesomeeeeeee! This helped a lot :D Thanks!!

Aug 22, 2011 at 7:27 am

It was great tutorial but my Question is when the page is on home page i want hover image as it is

Aug 23, 2011 at 12:09 pm

And then he handed you the thirty-five 45

Kundan Singh
Aug 25, 2011 at 10:52 pm

As i am a web Designer its help me lot when i create kids school web site

Sep 10, 2011 at 4:19 am

Great css menus.. thanks for sharing.

deri ceket
Sep 11, 2011 at 5:14 am

deri ceket ve deri ceket modelleri burada

Sep 13, 2011 at 12:06 pm

very cool. I will try to apply this to one of my websites

Sep 21, 2011 at 12:00 am

Thanks so much for this. This is exactly what I needed.

SEO Athens
Sep 26, 2011 at 9:16 am

Excellent stuff. This can work out really easy.

Sep 26, 2011 at 9:35 am

very useful tutorial! thanks!

Oct 10, 2011 at 8:52 am


Himanshu Goyal
Oct 12, 2011 at 6:36 am

Out standing fabulous, great

Oct 26, 2011 at 12:42 pm

Love your tutorial and your website too!

Oct 29, 2011 at 7:02 am

I Love This Tutorial.

zed kowl
Nov 3, 2011 at 4:20 pm

Great tutorial
what is the font used in name??

Nov 8, 2011 at 2:41 am

”Avant que” i think (:

zed kowl
Nov 8, 2011 at 3:16 am

thank you very much

Nov 24, 2011 at 8:03 am

its look good, thx bro :)

Nov 8, 2011 at 11:01 pm

How would you add an “active” selection to display the same as when hovering over? e.g. circled around home. Thanks,

Nov 22, 2011 at 10:57 am

yeah that was my first thought.

Nov 22, 2011 at 10:58 am

maybe use the active class.

Dec 16, 2011 at 5:17 pm

Specify id like this:


.topNav #active span {
width: 28px;
height: 28px;
background: url(../images/works_menu_hover.png) no-repeat;
left: 25px;
top: -35px;
It will activate only the image in the span section.

Nov 17, 2011 at 10:24 pm

Please, send me PSD file..pleaseeeeeeee:)

Nov 26, 2011 at 7:51 am

I wanted to shift the menu to the right of the site. But now my bottons wont overlap the menu background :( help!

Dec 3, 2011 at 12:08 pm

Hi there,

Is it possible to have the an image sprite for the hover only, so I can keep the html for the active state?

thanks for sharing!

Dec 26, 2011 at 10:57 pm


Jan 2, 2012 at 11:26 am

thanks a lot this was something specific i was serching for two days , exactly this.

Jan 23, 2012 at 8:00 am


Feb 6, 2012 at 9:48 pm

hi, i modified the css and apply it. it works awesome in chrome and firefox, but it just didnt work for IE.

do u guys have any suggestion for IE version :D

i need help :)


Feb 6, 2012 at 9:56 pm

sorry, please ignore. I did mistake with the “>”

Feb 13, 2012 at 6:17 am

Great we used i this service freely, nice to meet you it is site of us.

Apr 13, 2012 at 4:08 am

Great article for me to create menu using css
thanks a lot

Apr 17, 2012 at 4:39 am

Another cool tutorial..thank you so much..

Apr 22, 2012 at 7:32 pm

Your demo is a piece of art, very beautiful. Thanks for this.

yemek tarifleri
May 2, 2012 at 12:05 pm

Painting on the tablet is fun, but to do cool things need work.

Fact Stash
May 26, 2012 at 1:47 am

You know what? I will definitely use this for my site! it’s the coolest nav bar I’ve seen and I am serious!

Thanks!!! :)

Lenore Pelyo
Jun 23, 2012 at 5:11 am

I have been surfing online more than three hours as of late, yet I by no means found any interesting article like yours. It is lovely value enough for me. In my view, if all website owners and bloggers made excellent content as you probably did, the internet might be a lot more helpful than ever before.

Jul 11, 2012 at 11:56 pm

script is not useful for professional work.. it is just a bring bad name for css…… so dont upload these types of scripts….

Digital Mercenary
Oct 8, 2012 at 3:31 am

What in god’s name are you trying to say? Your comment makes no sense whatsoever…
“upload scripts”, “bad name for css”???
“not useful for professional work”? Que?

Aug 14, 2012 at 6:51 am

We are using one of the above menu for the health of our website, thanks for bundle of choices for our websites.

Alquiler yates Ibiza
Aug 14, 2012 at 2:42 pm

I will definitely use this for my site! it’s the coolest nav bar I’ve seen and I am serious!

Aug 22, 2012 at 5:01 am


Aug 22, 2012 at 5:03 am

i am bigner in css and jquery
it is more helpful …. i learn lot of
thank you

Aug 23, 2012 at 12:49 pm

Hi! This is a great tutorial but how do you make an Active state on click?


Aug 29, 2012 at 2:35 am

Eye opening Artіclе, іt is nice to find сгеatіve ωriting οn the internet, I аm really ρlеaѕеd to enсounter a blog that is nοt full of the everуԁay trash,
bless yоu.

Oct 9, 2012 at 6:22 am

really nice tutorial and quite advanced

Oct 9, 2012 at 6:28 am

i have also designed a css top navigation menu, hope you will like this nice collection,
here is the link

Nov 21, 2012 at 1:45 am

woow cool css .. I really like.
I also use, just look at my blog.

Dec 5, 2012 at 2:48 am

woow cool css .. I really like.
I also use, just look at my blog.

Jan 31, 2013 at 3:53 am

What an amazing menue. Thx a lot!

Jan 31, 2013 at 3:11 pm

an awesome guide,ty so much!!!
one question, how to position this menu to center of the page?

thx a lot

Atul Mandal
Dec 1, 2016 at 4:57 am

Great tutorial. This post helping me a lot. Thanks

Alok Halder
Jan 13, 2017 at 5:13 am

You save my lots of time. Thanks for giving this nice tutorial.

Nov 29, 2018 at 6:46 am


Post Comment or Questions

Your email address will not be published. Required fields are marked *