Web Designer Wall
UI Components

Advanced CSS Menu: Free-Positioned Links with Modern CSS

By Aigars Silkalns Updated 9 min read

An “advanced” CSS menu is one that breaks out of the horizontal bar: links sit at exact spots on an illustration, and a label or flourish appears when you point at them. The technique has not changed in principle. You still make a container position: relative, take each link out of flow with position: absolute, and place it with coordinates. What has changed is everything around it. You no longer slice images in Photoshop, hide text with text-indent: -900%, or patch Internet Explorer 6 with JavaScript.

This guide rebuilds the classic watercolor-style menu with today’s CSS: real text, coordinates as custom properties, a layout that scales with its container, hover and keyboard states that match, and a caption that follows its link through CSS anchor positioning.

Three pill-shaped menu links, Home, About and Feed, floating over a soft watercolor-style gradient background
The finished menu: three links placed freely over a gradient scene, with Home marked as the current page.

What the old technique did, and why it aged badly

The original recipe was an image-based menu. A designer exported a background image, then one GIF per button containing two stacked states (normal on top, hover below). Each link was given a fixed width and height, its text was shoved off-screen with a huge negative text-indent, and hover moved the background by changing background-position. An empty <span> held a second image for a floating label.

That approach had four problems that matter today:

  • The words were pixels. Text inside a bitmap cannot be translated, resized with the browser’s text settings, or recoloured for dark mode, and screen readers depend on the hidden text working.
  • Fixed pixel sizes. A 774-pixel-wide menu simply overflows a phone.
  • Hover only. Touch and keyboard users never saw the second state, and outline: none removed the focus ring entirely.
  • Heavy and rigid. Changing one label meant reopening Photoshop and re-exporting sprites.

Everything below keeps the visual idea and replaces every one of those weak points.

Start with a navigation landmark and a list

The markup is a <nav> containing a list of links. A list tells assistive technology how many items there are, and the nav landmark lets people jump straight to it. The positions are not in the markup at all: the stylesheet gives each list item its coordinates as custom properties, so the HTML stays clean and the layout can change without touching it.

<div class="scene">
<nav class="scene-nav" aria-label="Main">
  <ul>
    <li>
      <a href="/" aria-current="page" aria-describedby="hint-home">Home</a>
      <span class="hint" id="hint-home">Back to the start</span>
    </li>
    <li>
      <a href="/about" aria-describedby="hint-about">About</a>
      <span class="hint" id="hint-about">Who we are</span>
    </li>
    <li>
      <a href="/feed" aria-describedby="hint-feed">Feed</a>
      <span class="hint" id="hint-feed">Latest posts</span>
    </li>
  </ul>
</nav>
</div>

Two details are worth noting. The outer .scene wrapper exists for the CSS: it becomes the size container in a moment, and a container can only style its descendants, never itself. And aria-current="page" marks the active page for screen readers and gives you a CSS hook.

The caption is a sibling of the link, not a child, and it is connected with aria-describedby. That keeps the link’s accessible name short (“About”) while still exposing the extra text as a description.

The base CSS

This is the scene, the pills and their states. The caption gets its own section further down, next to the anchor positioning that drives it.

.scene {
  container-type: inline-size;
  max-width: 774px;
  margin-inline: auto;
}

.scene-nav {
  --ink: oklch(0.28 0.04 250);
  --paper: oklch(0.98 0.01 90);
  --accent: oklch(0.68 0.17 35);

  position: relative;
  aspect-ratio: 774 / 270;
  border-radius: 1rem;
  background:
    radial-gradient(60% 80% at 15% 30%, oklch(0.85 0.1 200 / 0.9), transparent 70%),
    radial-gradient(50% 70% at 55% 70%, oklch(0.85 0.12 150 / 0.85), transparent 70%),
    radial-gradient(55% 80% at 90% 25%, oklch(0.88 0.12 70 / 0.9), transparent 70%),
    oklch(0.96 0.02 90);
}

.scene-nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.scene-nav li:nth-child(1) { --n: --home; --x: 20%; --y: 50%; }
.scene-nav li:nth-child(2) { --n: --about; --x: 50%; --y: 42%; }
.scene-nav li:nth-child(3) { --n: --feed; --x: 80%; --y: 55%; }

.scene-nav li {
  position: absolute;
  left: var(--x);
  top: var(--y);
  translate: -50% -50%;
}

.scene-nav a {
  --lift: 0;
  display: grid;
  place-items: center;
  min-width: 18cqw;
  min-height: 44px;
  padding: 0.9rem 1.6rem;
  border-radius: 999px;
  background: var(--paper);
  color: var(--ink);
  font: 700 clamp(0.9rem, 3.2cqw, 1.4rem) / 1 system-ui, sans-serif;
  text-decoration: none;
  box-shadow: 0 0.5rem 1.25rem oklch(0.28 0.04 250 / 0.2);
  transform: translateY(calc(var(--lift) * -6px));
  transition: transform 0.2s ease, background-color 0.2s ease, box-shadow 0.2s ease;
}

.scene-nav a[aria-current="page"] {
  background: var(--ink);
  color: var(--paper);
}

.scene-nav a:is(:hover, :focus-visible) {
  --lift: 1;
  background: var(--accent);
  color: oklch(0.2 0.02 250);
  box-shadow: 0 1rem 1.75rem oklch(0.28 0.04 250 / 0.3);
}

.scene-nav a:focus-visible {
  outline: 3px solid var(--ink);
  outline-offset: 4px;
}

/* Dim the others while one is active */
.scene-nav ul:has(a:is(:hover, :focus-visible)) a:not(:is(:hover, :focus-visible)) {
  opacity: 0.7;
}

@media (prefers-reduced-motion: reduce) {
  .scene-nav a { transition: none; }
  .scene-nav a { transform: none; }
}

/* Narrow container: the illustration gives way to a plain stacked list */
@container (max-width: 480px) {
  .scene-nav { aspect-ratio: auto; padding: 1rem; }
  .scene-nav ul { display: grid; gap: 0.75rem; }
  .scene-nav li { position: static; translate: none; }
  .scene-nav a { font-size: 1rem; }
}

In this CSS, each li receives three custom properties: --x and --y are percentages of the scene, so positions survive any width, and --n is a unique name for the item, which the caption uses later.

Scale the scene with its container

The old menu was locked to a width and height in pixels. Here the nav gets aspect-ratio: 774 / 270 and its wrapper gets max-width: 774px, so the scene keeps the same proportions at any width. Making the wrapper a size container with container-type: inline-size lets the nav and everything inside it use cqw units, a percent of the container’s width, so font size and minimum button width follow the illustration rather than the viewport. A menu dropped into a narrow sidebar shrinks correctly, which a viewport media query cannot do.

Container queries are Baseline widely available, so the small-screen rule is also written with @container. Below 480px of .scene width, the absolute placement and the fixed ratio are switched off, padding is added and the links become a normal stacked list. The query targets .scene-nav and its children, which is why the container has to be the wrapper around it. The decorative layout is a progressive extra, never a requirement for finding the links.

The same menu on a narrow container, with Home, About and Feed stacked as full-width pills
In a narrow container the scene collapses into a plain stacked list.

Place items with custom properties

Each li uses left: var(--x), top: var(--y) and translate: -50% -50%. The translate means the coordinates point at the centre of the item instead of its top-left corner, so adjusting a label’s text never shifts its anchor point. The individual translate property is separate from transform, which leaves transform free for the hover lift without the two overwriting each other.

Absolute positioning is the right tool here because the layout is irregular on purpose. If your items follow a row or a grid, use Flexbox or Grid and skip positioning altogether; see Master CSS Flexbox in 5 Simple Steps.

Hover and keyboard states that match

The old hover swap is now a few declarations. Both :hover and :focus-visible are listed in the same selector so keyboard users get exactly the lift, colour and caption that mouse users do. :focus-visible is Baseline widely available and shows the ring for keyboard focus without flashing it after a mouse click. The custom outline uses a 3-pixel dark stroke with an offset, which keeps comfortable contrast against the pale pill and the gradient behind it.

The lift is driven by a --lift variable multiplied into a transform. State changes only set the variable, and the transform formula is written once. The :has() rule dims the other links while one is active, selecting the parent list by what it contains, something that needed JavaScript before.

The About pill raised and highlighted in orange, with a small dark caption reading Who we are above it, while other pills are slightly faded
Hovering or focusing About lifts it and shows its caption; the other links fade slightly.

Two guards keep the effect considerate. Under @media (hover: none), which matches devices whose main input cannot hover, such as phones, the hover-only caption is hidden instead of appearing stuck after a tap. Under prefers-reduced-motion: reduce, transitions and the lift are removed, and the colour change alone signals the state.

Anchor the caption to its link

Here are all the caption rules in one block, so you can copy them next to the base CSS:

/* The caption is plain text in the DOM, hidden unless anchor positioning works */
.scene-nav .hint { display: none; }

@supports (anchor-name: --a) {
  .scene-nav a { anchor-name: var(--n); }

  .scene-nav .hint {
    display: block;
    position: absolute;
    position-anchor: var(--n);
    bottom: anchor(top);
    left: anchor(center);
    translate: -50% 0;
    margin-bottom: 0.6rem;
    inline-size: max-content;
    padding: 0.25rem 0.7rem;
    border-radius: 0.5rem;
    background: var(--ink);
    color: var(--paper);
    font: 500 0.8rem / 1.3 system-ui, sans-serif;
    position-try-fallbacks: flip-block;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.15s ease;
  }

  .scene-nav a:is(:hover, :focus-visible) + .hint { opacity: 1; }

  @media (hover: none), (prefers-reduced-motion: reduce) {
    .scene-nav .hint { transition: none; }
  }
  @media (hover: none) {
    .scene-nav .hint { display: none; }
  }
}

@container (max-width: 480px) {
  @supports (anchor-name: --a) {
    .scene-nav .hint { display: none; }
  }
}

The old trick placed a floating label with hand-measured offsets such as top: -20px. CSS anchor positioning replaces the measuring. The link declares anchor-name: var(--n); the caption points at the same name with position-anchor and sets its edges relative to the anchor: bottom: anchor(top) sits it on the link’s top edge and left: anchor(center) plus translate: -50% 0 centres it.

Because the name comes from the per-item --n variable, every item gets its own anchor. If you reused one literal name for all three links, the caption would attach to only one of them. The line position-try-fallbacks: flip-block tells the browser to flip the caption below the link when there is no room above, for example when a link sits at the top of the scene.

Anchor positioning reached Baseline newly available when Firefox 147 shipped it, joining Chrome and Edge 125 and Safari 26. Since “newly available” is not “widely available”, the design degrades gracefully because every caption rule sits inside @supports (anchor-name: --a). In an older browser the caption stays hidden with display: none rather than appearing in the wrong place, and the link itself is unaffected. Touch screen-reader users are still covered: aria-describedby keeps working on a display: none caption under (hover: none), so the description is still announced even though it is never shown.

Accessibility checklist

  • Real text in every link. No text-indent hiding, no text in images. If you add icons, give decorative ones aria-hidden="true".
  • Touch target size. min-height: 44px keeps each target comfortably large; WCAG 2.2 sets a 24-pixel minimum and 44 pixels is the common, safer goal.
  • Never remove focus styles. The old outline: none is replaced by a deliberate :focus-visible style.
  • Do not hide information in hover. The caption is extra context only; the link text must stand alone. Hover-revealed content should also be dismissible and hoverable under WCAG 1.4.13, which is easy to satisfy for a short caption.
  • Source order is reading order. Absolute positioning changes appearance, not DOM order, so keep the list in the order you want tabbing to follow.
  • Contrast. Test text on top of every part of an illustration, not just the average colour. Pills with solid fills, like these, avoid the problem.

Adapting the idea

You can replace the gradient with an inline SVG map, an illustrated floor plan, a product photo with hotspots or a game-style level select. The structure does not change: a container with a ratio, a list of links, and coordinates per item. If you use an image, put it behind the list with background-image or a positioned <img> with an empty alt when it is purely decorative, and give the coordinates a second look at several widths.

For an ordinary site header, a simpler pattern usually serves better. These ready-made pieces cover the common cases:

To go deeper on the selectors used here, read The Power of CSS Selectors and How to Use Them.

Quick reference

Old technique Modern replacement
Sprite GIFs shifted with background-position Real text on a CSS-painted button, state changes via custom properties
text-indent: -900% Visible link text
Fixed pixel width and height aspect-ratio, container queries and cqw units
Hand-measured top/left for the label Anchor positioning with anchor()
outline: none :focus-visible with a clear outline
JavaScript hover for IE6 Not needed

Free snippets for this topic

Ready-made Bootstrap 5 components with live preview and copy-ready code.

All menu snippets
283 comments from the archive

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

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

    Thanks!

  2. Edit:
    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.

  3. 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 .

  4. 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.

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

    Try this! <span> About </span>

  6. 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…?

  7. 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).

  8. 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 .

  9. 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…!

  10. 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! :)

  11. 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.

  12. @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>).

  13. 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.

  14. 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?

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

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

  17. 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.

  18. @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?

  19. @ 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.

  20. @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.

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

  22. 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.

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

  24. 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.

  25. 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.

  27. 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.

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

    Thanks…

  29. 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.

  30. 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?

  31. 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.

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

  33. 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.

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

  35. 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!

  37. 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.

  38. 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.

  39. 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.

    Cheers,
    Terje

  40. 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.

  42. 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 – http://www.hansongardenclub.org – if someone wishes to disect my code to understand – not sure if I have a bookmark on this method…I’ll go check

  44. 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”
    /div

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

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

  47. 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.

  48. uhh,

    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

  51. 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

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

  53. 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?…

    thanks…

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

  55. 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.

  56. 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.

  57. 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!

  59. 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

  60. 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?

    huckle

  61. 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 :)

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

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

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

  66. 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.

  67. 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.

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

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

  70. 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

  72. 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?

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

    Ron,
    Interactive Media Manager,
    AXEKS Labs, India

  74. 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)!

    Ron,
    Interactive Media Manager,
    AXEKS Labs, India

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

  78. 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?

  79. 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.

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

  81. 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!

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

  85. 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!

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

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

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

  89. 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..?

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

  91. 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.

  92. 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?

    Jordan.

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

    Thanks!

    FayeC

  94. 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…?

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

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

  98. 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

  102. 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!

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

  105. 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?

  106. 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.

  108. 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 ?

  109. 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 :-)

  110. 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

  112. css layer examples / properties and layer attributes
    css-lessons.ucoz.com/css-layer-properties.htm

  113. 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" /#
    #![endif]--#

    # 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 :)

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

  115. 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

  116. 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.
    Thanks!

  117. 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?

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

  119. 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!

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

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

  123. 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.
    Thanks!

  125. 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.

  126. 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.

    Thanks…

  127. helo
    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

  128. 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??

  129. 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

    Jake

  130. 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

    Jake

  131. 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.

    Sam.

  132. 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: http://www.kathrynmarylee.com

    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.

  133. Jacob,
    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 :(

  134. 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

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

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

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

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

    CSS:
    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}

    HTML:

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

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

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

  141. 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} routeb.com

    Sorry had to write it like that cos of spiders.

    Jake

  142. 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.

    thanks

  143. 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

  144. 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.

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

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

  148. 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.

  149. 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:

    Home
    Portfolio
    Contact Us
    .

    Is there something fundamentaly flawed with the design?

  150. sweet!!
    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?

  151. 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.

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

  153. 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!

    barterboutique(at)gmail(dot)com

  154. 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.

    Regards,

    James

  155. 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?

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

    Regards,
    Fahad Ahmed / Fahdi

  158. 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!!

  159. 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 (:

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

  161. 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!

  162. 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?

  163. 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?

  164. 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

  165. 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.

  166. 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.

  167. 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???

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

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

  170. 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.

  173. 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.

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

  175. Hi, this is really a great menu!

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

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

  177. 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

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

  180. Hey.

    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??

  181. 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!

  182. 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

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

    thanks man.

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

  191. 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.

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

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

  195. Quite elaborated and informative tutorial.

    But i must say that https://www.xhtmlmania.com/ 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.

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

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

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

  199. 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.

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

  201. 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.

  202. 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?

  203. 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.

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

  208. 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

  209. 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.
    Thx

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

    chopper

  211. Attn: JC

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

    chopper

  212. 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!

  213. 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”

  215. 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.

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

  217. 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.

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

  219. HAHAHA DSL 16.000 3sec LADEZEIT fürs
    background-image: #haha url(“wie-geil-oder.net”) 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”

  220. 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?

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

  222. 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.

  223. 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? ^^

  224. 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!!!!!!!!!!!!!!!

  226. 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.

  227. 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.

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

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

  231. 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”

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

  233. 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?

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

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

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

  238. Hi!

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

    //Rob

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

    Thanks

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

    Thanks

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

    Thanks

  244. 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.

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

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

    Best,
    Katja

  247. 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..

  248. Advanced CSS Menu article cleared my confusion. Thanks.

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

  250. 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

  251. 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 :)

  252. 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.

  253. 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?

    1. Jehzlau,

      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.

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

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

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

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

    1. Specify id like this:

      OUR WORKS

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

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

  263. 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!
    Alex

  264. 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 :)

    thanks

  268. 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!!! :)

  269. 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.

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

    1. 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?

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

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

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

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

    Thanks!

  275. 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.

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

    thx a lot

Comments are closed on this article.