This is a quick CSS tutorial to show you how to create a menu list using either the CSS border style or a background image. The trick is to apply a bottom border to the <li> element, then use the absolute position property to shift the nested elements down to cover the border. It is very flexible — you can easily change the layout by altering the border or background image. It even works when the browser’s font size is being scaled (increased or decreased).

View Demo Menu Design

1. HTML Code

Take a look at the HTML code and the diagram. They will help you understand how the CSS work.

  <li><strong>CSS Design</strong> <em>250<sup>95</sup></em></li>

code explain

2. CSS Code

The key points are:

  • Specify the <li> element to position:relative and apply a bottom border style.
  • Use position:absolute with negative bottom value to shift the <strong> and <em> element below the border.
  • Remember: use relative value (em) to control the padding space.
.menu {
  width: 500px;
  list-style: none;
  margin: 0 0 2em;
  padding: 0;
  font: 150%/100% Arial, Helvetica, sans-serif;
.menu li {
  clear: both;
  margin: 0;
  padding: 0 0 1.8em 0;
  position: relative;
  border-bottom: dotted 2px #999;
.menu strong {
  background: #fff;
  padding: 0 10px 0 0;
  font-weight: normal;
  position: absolute;
  bottom: -.3em;
  left: 0;
.menu em {
  background: #fff;
  padding: 0 0 0 5px;
  font: 110%/100% Georgia, "Times New Roman", Times, serif;
  position: absolute;
  bottom: -.2em;
  right: 0;
.menu sup {
  font-size: 60%;
  color: #666;
  margin-left: 3px;

3. Change Border Style

You can easily change the style by editing the CSS border and padding for the <li> element.

li {
  border-bottom: dashed 1px #000;
  padding: 0 0 2.3em 0;

4. Use Image as Border (see final demos)

You can also use a background image.

li {
  background: url(images/circle.gif) repeat-x left bottom;

5. IE6 Version (see IE6 demo)

If you are still using the old and buggie IE6 browser, you may notice the layout doesn’t render properly. To fix the issue, simply add the clearfix trick to the <li> element.

/* clearfix */
.menu li:after {
  content: "."; 
  display: block; 
  height: 0; 
  clear: both; 
  visibility: hidden;
.menu li {display: inline-block;}
/* Hides from IE-mac \*/
* html .menu li {height: 1%;}
.menu li {display: block;}
/* End hide from IE-mac */


Jan 30, 2009 at 4:51 am

That’s incredibly clever – thanks for that neat little trick.

Jan 30, 2009 at 5:07 am

seems like there is no way around to learn CSS ;)

Jan 30, 2009 at 5:24 am

Clean, sweet, useful and well-explained. That’s what we expect and what we got – Well done Nick, thanks for sharing :) .

Jan 30, 2009 at 5:27 am

Hey Nick!
I’ve used kind of the same trick a few month ago on a friends restaurants website.

Get a bit trickier, when it comes to two-lined List-Elements.

You can check out what I mean over at

See the Source-Code for my solution…

All the best from bonn, germany,

Jan 30, 2009 at 5:34 am

(The restaurant is in Bonn, greetings from Cologne!;)

Fred Soler
Jan 30, 2009 at 5:50 am

Very interesting. Will see it later.

Greetings from France (Marseille, la famille !)

Jan 30, 2009 at 5:57 am

you’r attention to detail is outstanding, much appreciated!

Chris Praley
Jan 30, 2009 at 6:12 am

Neat trick! I will definitely be trying that out sometime soon.

Chris Hunt
Jan 30, 2009 at 7:01 am

Under section 5, if you’re only serving up the clearfix code for IE6, why bother with the menu li:after rule that IE6 won’t understand and other browsers (presumably) won’t need?

In fact, all you need to do to make it work in IE6 (I don’t know what this does on IE-Mac, but does anybody really use that browser any more?) is this:

.menu li {display: inline-block;}
.menu li {display: block;}

That code should do nothing at all, but it clears the display bug that otherwise messes up IE6’s display of your clever code. God (and Bill) alone knows why.

Jan 30, 2009 at 8:44 am

thanks for the tut

Ryan S
Jan 30, 2009 at 9:04 am

Very nice! As always well explained tutorials.

Jan 30, 2009 at 9:39 am

Very nice end product!

Brad Edwards
Jan 30, 2009 at 9:44 am

I was just describing to a client how this would not work in the web world. I enjoy eating my words. Excellent tutorial!

Jan 30, 2009 at 9:57 am

Well … just one remark on this otherwise great tut.
Tables are not dead.
Of course not as flixible as this one.
Just wanted to say there is still use for tables in displaying … tables :-)


Danny OUtlaw
Jan 30, 2009 at 10:11 am

great idea and tutorial as always!

Jason Evers
Jan 30, 2009 at 10:33 am

A weakness of this technique would be difficulty putting this on a page with an organic or pattern background because of the background color needed to offset the dotted line.

DKumar M.
Jan 30, 2009 at 10:57 am

Very Nice and Easy Tutorial Nick…. Thanks For sharing such a useful stuff !!

DKumar M.

Jan 30, 2009 at 11:46 am

Can you explain why ur using :after on IE, when it doesnt understand it at all?

Josh Drake
Jan 30, 2009 at 12:27 pm

Nice, simple effect. A bit of a beginner’s tutorial, but hey – they need tutorials too! Thanks!

Jan 30, 2009 at 12:30 pm

On my IE7 browser, some of the numbers were being cut off at the bottom? They display find on Firefox and Chrome though, nice tutorial! Thanks :)

gareth hunt
Jan 30, 2009 at 12:41 pm

You can achieve the same effect without absolute positioning and without setting padding to flesh out the list item.

Set the strong and em elements (which I think are used slightly inappropriately in your example) to position:relative and float the former left and the latter right. You can still shift elements using top / bottom / left / right and position:relative but there is the benefit, in this situation, that the “space” taken up by the elements before they are offset is maintained and so the list item will be equal in height to the height of the largest element. This negates the need to force the list item to have some kind of height that is divorced from the height of its child elements.

Since you have to float both child elements you need to apply the :after clearfix to the menu list items. You can achieve the same thing in IE just by setting a width, such as 100% in this example, because you only need to trigger hasLayout.

Then any additional inter list item spacing can be controlled with margins.

gareth hunt
Jan 30, 2009 at 12:47 pm

@ Kit

That’s because this tutorial sets the line-height of the em element at 100%. Change the line height to something like 1.2em and your numbers will not be cut off in IE.

Jan 30, 2009 at 1:16 pm

Great example…..thanks!

Jan 30, 2009 at 5:05 pm

Weirdly enough, I needed exactly this today. Thanks a bunch for this tut. =D

Jan 30, 2009 at 8:37 pm

Very nice and great ideat,
Thank you ^:)^

Jan 30, 2009 at 10:31 pm

Ha! Been looking for this like years ago, thanks!

Jan 31, 2009 at 5:04 am

Amazing! I can not imagine how. I want to use.

Jan 31, 2009 at 8:15 am


Matt Wood
Jan 31, 2009 at 1:46 pm

Thanks for the tutorial, Nick.

However, I agree with the commenter gareth hunt, that, in terms of semantics, the strong and em tags are used incorrectly. The same can be said for the sup tag.

Remember folks, we’re trying to write better code every day, and our tags should be describing the type of information, not how they should displayed (for example, just because you want the $.00 to be raised, it’s not a legitimate superscript, such as a footnote or mathematical equation.)

Jan 31, 2009 at 4:23 pm

if you want to keep semantics just swap the tags for spans and set a class. It adds codes but you are left with semantically correct code. good tip tho.

Feb 1, 2009 at 2:14 am

it’s a good CSS tutorial. I do the same effect without absolute positioning.

Feb 1, 2009 at 8:07 pm

Nice write-up on a cheeky little technique. I like it :)

Johan Lorentzon
Feb 1, 2009 at 10:29 pm

Nice one! Will use for my next restaurant clients.

Brady J. Frey
Feb 2, 2009 at 1:11 am

I did something similar for the menu on my Kamalaspa site, though a background image to recreate the dots and get around IE 6’s crash on dotted border:

But I had to use Firefox specfic hacks (eek, I know) because the right side element was always 10 pixels up… thanks for tutorial, I’ll try and rework this old guy to be more universal on your method:)

izzat aziz
Feb 2, 2009 at 3:26 am

i may use it for my portfolio, to display skill level stuff..
nice tutorial though, thanks.

Feb 2, 2009 at 8:23 am

muito bom!!!
adorei o post :)

Feb 2, 2009 at 10:59 am

@matt and garret:

As of the sup tag… In some languages is common to write smaller changes (eg cents) in superscript. Though, it’s semantically correct.

Also, for strong and em – why it’s semantically incorrect? Those parts have semantic value – the name of the dish/skill/etc and the price/time/level (something to emphasise). I think using Span tags will be worse, because it doesn’t semantically distinct two pieces of information in list entry – target and the price.

BTW, nice tutorial. Thanks.

Feb 2, 2009 at 11:58 am

Great tutorial!
Even with IE6 trick, it fails because of the positioning. This one ( ) opened in IE6 shows the big values with the bottom cut. So, in Spicy Hot Roll seems 20.99 and not 29.99

If we add conditional comments ( if lt IE7 etc) and reduce the em might work, don’t?

I’ll try it and tell you later.

See you :)


Elizabeth K. Barone
Feb 2, 2009 at 12:19 pm

I was just working on a menu and was trying to come up with a better way to display it. Thanks so much for this!

Feb 2, 2009 at 12:49 pm

Thanks for a great tutorial!

Max Weir
Feb 2, 2009 at 3:07 pm

Great tutorial, its something that can be used for multiple purposes and is very simple to integrate. Raphael raised a good point regarding IE6’s issue with the prices, hopefully there will be a fix posted.


Feb 2, 2009 at 6:39 pm

thanks for the great fix for an age old problem for menu. You really helped me out. Danke!!

Feb 3, 2009 at 2:09 am

perfect css tutorial !

Feb 3, 2009 at 3:20 am

Thanks a lot for the tutorial, very useful. Best from Ralph

printers in brisbane
Feb 3, 2009 at 4:01 am

this is good…very good!

Alex Vladoiu
Feb 3, 2009 at 6:22 am

Nice trick! Thank you!

Feb 3, 2009 at 9:14 am

Thanks for the tutorial. Very helpful. I am sure I can think of ways to implement this method. Thanks again.

Dale Sande
Feb 3, 2009 at 11:10 pm

While this solution is well written, I too ran into major issues with legacy browsers. To simplify the HTML, I choose to use the Definition Lists approach (DL, DT, DD) and a background image. The process is the same, lay in a background image and cover the desired areas with a color background.

Check out The solution is solid and even worked in IE 5.5. Everything else goes to hell, but this works ;) If anyone wants more of an explanation, feel free to email me.

Feb 4, 2009 at 4:37 am

Very useful! Thank you, Nick!

Jonny Haynes
Feb 5, 2009 at 4:41 am

Nice tutorial. Was looking into this myself for a friend.

Feb 6, 2009 at 5:48 am

Very nice website… your are the best…

Feb 6, 2009 at 2:30 pm

There’s always a hater, (Dale Sande) Why are you still testing for IE 5.5 .. ?? are you kidding me… anyway… I love the extra fee for IE 6 support … LOL.. however 34% of the world unfortunately is still using this browser as far as IE 5.5 , 0% of the world is using this browser….

Feb 7, 2009 at 7:27 am

woww..great blog! ur tutorial so useful..thx :)

gareth hunt
Feb 7, 2009 at 8:23 am

@Dale Sande – definition lists are not appropriate to mark up this information. The point of the tutorial was also to avoid using background images were possible. I’d also argue that you are wasting your time worrying about IE5 or other legacy browsers that make up <0.1% of the market and continue to shrink. However, I have already suggested in an earlier comment that there is a preferred method that doesn’t use absolute positioning.

@RaphaelDDL & @Max Weir – see comment 22

@TiS – em and strong can’t be used for presentational reasons or just to give you a hook to apply some css for positioning. This is simply a list and I don’t believe you can justify using these elements. The service / dish is not “important” and nor should the cost be “emphasised”. It is using these elements incorrectly. If you want to add appropriate semantics then you could use microformats with span tags. A further problem with this demo is that the cost is not represented with a currency (which is an actual problem because their is a failure to indicate the nature of the number) and the decimal place is missing.

Rob Wallace
Feb 7, 2009 at 8:39 am

I couldn’t grasp the demo image. However the areas of economy of code, blowing out IE5 and the approach is great. But, does this cdd work the same in FireFox, I wonder how many pros test in FireFox.

Feb 7, 2009 at 9:58 pm

You are my hero, your site is amazing! Your tutorials are so awesome!

Feb 8, 2009 at 3:12 am

A nice idea to publish a price list on a website. Thank you for this tutorial. Ralph

Feb 8, 2009 at 1:03 pm

Interesante técnica… gracias por compartirla

Feb 9, 2009 at 9:05 pm

Great tutorial, this will come in handy.

Dale Sande
Feb 9, 2009 at 9:25 pm

Ok, I feel I need to clear my name here. I have taken a lot of flame here because I have posted an alternative solution that takes less IE counter actions. I do realize that this exercise was an attempt to solve this UI issue without images, but I also realize that there is a lot of additional effort needed in order to make this example work across different browsers.

I do not understand why using a Definition List in this example is such a bastardization of the HTML tag? I found this a simpler solution as in repeated execution I do not have to insert the additional tags?

Then the apparent bane of my post, IE5.5 support. I don’t know why this comment was taken with such harsh criticism. I simply stated that with the idea I proposed, without additional effort it also happened to work with IE5.5. If anyone had taken the opportunity to look at the site I posted in IE5.5, you will see that everything else pretty much goes to hell, but this one thing still works. I am a progressive developer and I maintain a clear sight on the horizon. I am not a IE zombie or a developer that unrealistically holds onto the past. So please, lay off.

@Organicum – “I love the extra fee for IE 6 support … LOL” What is that supposed to mean? Do I not use enough dramatic drop shadows and that is why you hate me?

John Dawson Photography
Feb 11, 2009 at 12:02 pm

Good example – I agree that IE6 is still important since some clients still worry about it and check it. I find that when I ignore IE6 during coding, it comes back to bite me so I try my best to make sure my stuff renders in all major browsers.

Miss Blossom
Feb 16, 2009 at 4:04 am

I’m going to try this one for my next site. Actually I may even have one I can use it for now. How exciting! It would work really well for online beauty salon treatment menus and pricelists.

Feb 16, 2009 at 5:29 am

Great tutorial, I used something similar a while back on a project of mine (example:

The idea for it I got after looking at the BBC website, they used something similar on one of their lists of features.

Feb 16, 2009 at 2:29 pm

Thanks for the tip. I may be working on a website for a yogurt place and this would be great for the menu.

Feb 16, 2009 at 9:58 pm

Thanks for you.This is I want.

Feb 18, 2009 at 11:39 am

you know? i really love the way you provide tutorials on your site. Very very friendly and spoon feeding (well, as what newbies always wanted, feed them :) )…More power and God bless!

Feb 20, 2009 at 12:52 am

nice one!

Feb 20, 2009 at 11:33 am

Thanks for this tutorial.
I’ve lots to do yet….


Feb 22, 2009 at 10:48 pm

I am a newbie.Your tutorials really helped me a lot.Thank you!!!!!

Web Design Studio
Feb 23, 2009 at 10:59 pm

This is a great quick tutorial that is very useful we work on a lot of restaurants and are implementing menus like this in to the text.

Feb 25, 2009 at 8:00 am

Great! I had never seen anythink like this before

ótimo tutorial :)

Feb 25, 2009 at 12:29 pm

I would agree with Dale Sande that a definition list is the right way to go here – the menu itself is a list of items that need clarification (in terms of price), each list item is a term, and the price is its definition (in dollars). Other than marking up a page in a dictionary, I can’t think of a better application for DLs.

I’m sure it’s possible to make this imageless with DL’s too, using a couple of spans (one lining the DT, and one around the cents).

The SUP for cents is especially wrong, semantically. I’d almost be cheeky and use SMALL instead (not exactly correct to the spec, but it makes more sense to me).

Feb 28, 2009 at 3:18 pm

nice articles

more menu design visit.

Mar 1, 2009 at 4:14 am

Hi That’s awesome :)

Mar 6, 2009 at 4:40 am

Quite helpful. li tag is probably one of the most useful tags in html

John Pash
Mar 6, 2009 at 7:16 pm

I really like this technique. I’ve come up with a similar solution in order to simluate the “legend” tag for display purposes outside of a form. Of course, I could just use “legend”, but it doesn’t validate.

Mar 12, 2009 at 8:15 pm

A good tutorial, But John I would never consider using CSS tricks to simulate already existing HTML tags instead I would use the CSS to style and modify the tag to fit with the design.

Mar 24, 2009 at 7:52 am

I like the way the menu was created. It was quite hard for me to find out how the dotted lines effect were created in a menu prior to this way. Thanks!

inregistrare domenii
Apr 6, 2009 at 11:56 pm

thank you and keep up the good work!

web design gold coast
Apr 16, 2009 at 4:03 am

Brilliant! Thank you so much for sharing.

Keith D
Apr 20, 2009 at 9:13 am

Looks good

thganks for showing how in such a well presented fashion.

Keith D

Apr 27, 2009 at 11:24 am

Thanks for this. Works beautifully!

May 21, 2009 at 8:21 pm

helpful. thanks!

Matthew Bruce
Jul 7, 2009 at 8:48 pm

Very helpful tutorial!

Elizabeth K. Barone
Jul 27, 2009 at 8:24 am

I added a description beneath each li using a p tag. It worked great for me in FF, IE 7, Safari, Opera, but it broke on my client’s machine and can be duplicated when previewed in TopStyle. I’m working on a solution now, but I think I may end up just using dl tags to mimic what you’ve got. (My client needs each menu item to have a description.)

Anyone else running into this problem, by any chance? I wish I knew what the problem was. I’m thinking that it might just be a machine problem, since it looks fine on some machines but breaks on others.

ƒЯєє ςtγlє
Jul 28, 2009 at 3:11 am

oh this I have used…very good for pure css menu :)

Aug 8, 2009 at 5:39 am

Thanks What’s the problem here? Google could bury the meager profit number from even the biggest media conglomerates.

Aug 8, 2009 at 5:43 am

these are awesome!
thanks for putting in the effort to get this list together

Aug 8, 2009 at 6:15 am

Thank =)=)=) you

Aug 8, 2009 at 6:28 am

Thank =)=)=) you webdesignerwall Thanks

Aug 8, 2009 at 7:59 am good website

Aug 10, 2009 at 9:24 pm

these are awesome!
thanks for putting in the effort to get this list together, now i can fix my page

jatropha, jatropha seed
Aug 10, 2009 at 11:44 pm

Very helpful tutorial!

Aug 12, 2009 at 9:45 am


Smashing Themes
Aug 13, 2009 at 2:21 am

Awesomeness :)

Aug 14, 2009 at 3:25 am

yha :):) Dont!

Aug 14, 2009 at 3:33 am

Aug 25, 2009 at 4:42 pm

Wouldn’t it be easyer and more semantic to use a definition list here?

Sep 4, 2009 at 4:48 am

I learned a lot here.

Johannes Booy
Sep 10, 2009 at 10:39 am

Agree that this would be a lot easier and more semantically accurate if you were using a definition list.

Sep 10, 2009 at 8:04 pm

these are awesome!
thanks for putting in the effort to get this list together

Sep 21, 2009 at 9:19 am

Great , CSS: Menu List Design
Great article. CSS saved web design

Oct 14, 2009 at 9:14 am

I can note that using the relative value (em) to control the padding space can be the best way to prevent incorrect reflection of elements in browsers. But is it reasonable to use image as a border-background? I usually apply separately images as the visual borders and borders of the elements as separate elements. I can’t imaging using images in border attributes.

Oct 31, 2009 at 5:10 am

Agree that this would be a lot easier and more semantically accurate if you were using a definition list. Thanks

Nov 3, 2009 at 8:54 pm


Nov 12, 2009 at 4:22 pm

We’ve been using the css li method to create menus on our pub website for a while now but could really do with some fresh ideas to bring the design to life. Thanks for the great tips.

Nov 14, 2009 at 1:55 pm

That’s cool.

Nov 18, 2009 at 11:08 am

it is cool.thank you !

Nov 29, 2009 at 9:41 pm

4. Use Image as Border (see final demos)
very easy

Dec 15, 2009 at 5:15 am

thanks! it is exactly what I have been looking for <3

Software services
Dec 28, 2009 at 5:42 am

Great stuff thank you for sharing.

Jan 6, 2010 at 1:45 am


Mar 20, 2010 at 1:30 am

thank you!

Apr 20, 2010 at 11:16 am

How could you make something like this work in a nested ul list?

Web Design
Apr 28, 2010 at 8:19 pm

very cool!! THANKS!

Jul 27, 2010 at 5:52 am

I really loved the menu design of this page (Home, About, Jobs) and the mouse over. Can you send me the full CSS code for that? I would really appreciate it.


Mr wu
Aug 10, 2010 at 9:26 pm

Great feel with you are design Thanks for share

Sep 21, 2010 at 8:07 am

fantastic and many cool

Oct 7, 2010 at 10:26 am

very good and clean tutorial. thaks

Oct 11, 2010 at 1:03 am

CSS has changed the whole scenario of web designing. The example and code shown here is really very useful to all the web designer.

Los Angeles Web Design

Oct 21, 2010 at 2:42 am

Fantascic blog and design! Thanks.

El garch
Oct 21, 2010 at 5:13 am

Thank you for this post, you’re doing a good job keep postiong plz |:-D

Shahid Saifi
Oct 22, 2010 at 4:46 am

Good use of positioning. NICE!

Nov 15, 2010 at 4:22 am


Juno Mindoes
Dec 23, 2010 at 11:09 pm

There’s no doubt that the white iPhone 4 has a much better camera than the iPhone 3G and the iPhone 3Gs, and the new HDR functionality makes it even easier to get good results during hard lighting conditions.

Henry Peise
Dec 24, 2010 at 9:15 pm

With the most fashion designer, White iphone 4 Conversion Kit can be your new autumn/winter fashion piece for your favorite iphone 4. Why not make a little change for your iphone 4.

Dec 30, 2010 at 12:55 am

That is to be expected in a long-term, high-risk project like ours. So, we turned to the blogging community for help – and got it! We have published our problems, and the community responded with results!cheap ugg boots

Dec 30, 2010 at 12:56 am

That is to be expected in a long-term,ike ours. So, we turned to the blogging community for help – and got it! We have published our problems, and the community responded with results!cheap ugg boots

altın çilek
Feb 2, 2011 at 5:48 am

I always follow your site thank you

hcg damla
Feb 2, 2011 at 1:32 pm

Thank you for this post, you’re doing a good job keep postiong plz

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

Easy and flexible tutorial that I can follow with just minute confusion. Thanks.

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

It is a quick CSS tutorial but showed a lot of good stuff.

panax clavis
May 16, 2011 at 5:52 am

I always follow your site thank you

hcg damla
Jun 15, 2011 at 7:08 am

I always follow your site thank you….

Jun 15, 2011 at 11:01 am

Great post. Thanks

Jun 16, 2011 at 1:34 am

good job congraculations

Andezit Taşı
Jul 19, 2011 at 5:14 am

nice share,thanks:))

pembe maske
Sep 14, 2011 at 5:25 am

I always follow your site thank you….

arnold ecubin
Oct 24, 2011 at 5:37 am

nice 1 good job

Dec 9, 2011 at 9:01 am

I always follow your site thank you

Jan 11, 2012 at 6:09 am


Mar 23, 2012 at 7:16 pm

Nice explanation with an image .Great Thanks for it.

May 2, 2012 at 1:25 pm

Thank you This is organized very nicely

Creative Hero
Jul 5, 2012 at 1:25 am

Nice Post….. thanks….. :)

Jul 6, 2012 at 2:14 am

great ,

Jul 23, 2012 at 9:16 am

i want to saw more art work wallpaper

weblistings Inc
Jul 30, 2012 at 4:17 am

I get what i search, thanks

Dec 2, 2018 at 3:48 pm

found this 9 years later, this is the best way to make simple css dot leaders, saved my day thanx !!

Post Comment or Questions

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

This site uses Akismet to reduce spam. Learn how your comment data is processed.