CSS: Menu List Design - Web Designer Wall

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.

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

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 */

Righteous_Trespasser

Jan 30, 2009 at 4:51 am

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

Manuel

Jan 30, 2009 at 5:07 am

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

Marco

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

Oliver

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 http://www.il-bistrorante.de

See the Source-Code for my solution…

All the best from bonn, germany,
Oliver

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

THEODIN

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.

Designer

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.

Timothy

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!

Henning

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

lefiath

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!

Kit

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.

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.

Samuel

Jan 30, 2009 at 1:16 pm

Great example…..thanks!

Kim

Jan 30, 2009 at 5:05 pm

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

Sveatoslav

Jan 30, 2009 at 8:37 pm

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

Amu

Jan 30, 2009 at 10:31 pm

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

kruz

Jan 31, 2009 at 5:04 am

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

saki

Jan 31, 2009 at 8:15 am

thank!

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

Si

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.

henry

Feb 1, 2009 at 2:14 am

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

Gary

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:
http://www.kamalaspa.com/spa-salon/

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.

Thiago

Feb 2, 2009 at 8:23 am

muito bom!!!
adorei o post :)

TiS

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.

RaphaelDDL

Feb 2, 2009 at 11:58 am

Great tutorial!
Even with IE6 trick, it fails because of the positioning. This one ( https://webdesignerwall.mystagingwebsite.com/demo/menu/menu-list-ie6-version.html ) 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 :)

Regards
RaphaelDDL.com

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!

WPCult

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.

Thanks.

Patrick

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

tekin

Feb 3, 2009 at 2:09 am

perfect css tutorial !

ralph

Feb 3, 2009 at 3:20 am

Thanks a lot for the tutorial, very useful. Best from Ralph http://www.deprowebs.com

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!

CMHB

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 http://www.madisonmac.com/services_and_support/software-support/. 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.

Jan

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.

Issam

Feb 6, 2009 at 5:48 am

Very nice website… your are the best…

Organicum

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….
http://www.thecounter.com/stats/2009/February/browser.php

qishi87

Feb 7, 2009 at 7:27 am

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

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.

Dupe

Feb 7, 2009 at 9:58 pm

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

Ralph

Feb 8, 2009 at 3:12 am

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

bienB

Feb 8, 2009 at 1:03 pm

Interesante técnica… gracias por compartirla

themisfit

Feb 9, 2009 at 9:05 pm

Great tutorial, this will come in handy.

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.

Peter

Feb 16, 2009 at 5:29 am

Great tutorial, I used something similar a while back on a project of mine (example: http://www.soccerkits.com/Barcelona-Azzure-White-p24.html)

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

Harris

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.

gaijun

Feb 16, 2009 at 9:58 pm

Thanks for you.This is I want.

Backbone

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!

Joseph

Feb 20, 2009 at 12:52 am

nice one!

zeta

Feb 20, 2009 at 11:33 am

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

ciao!

tin

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.

caina

Feb 25, 2009 at 8:00 am

Great! I had never seen anythink like this before

ótimo tutorial :)

beejamin

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

jon

Feb 28, 2009 at 3:18 pm

nice articles

more menu design visit. http://www.csshook.com/menudesign

Anne

Mar 1, 2009 at 4:14 am

Hi That’s awesome :)

nishant

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.

Mat

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.

Jobs

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.

Mary

Apr 27, 2009 at 11:24 am

Thanks for this. Works beautifully!

francisa

May 21, 2009 at 8:21 pm

helpful. thanks!

Matthew Bruce

Jul 7, 2009 at 8:48 pm

Very helpful tutorial!

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

cennet

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.

cennetevi

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 http://www.cennet.gen.tr

Aug 8, 2009 at 6:28 am

Thank =)=)=) you http://www.cennet.gen.tr webdesignerwall Thanks

kpss

Aug 8, 2009 at 7:59 am

http://kpssdestek.blogspot.com/ good website

WAMPvn

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

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!

murat

Aug 14, 2009 at 3:33 am

islamsevdasi.com

LazyAndroid

Aug 25, 2009 at 4:42 pm

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

KJL

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.

bagsin

Sep 10, 2009 at 8:04 pm

Cyrus

Sep 21, 2009 at 9:19 am

Great , CSS: Menu List Design
Great article. CSS saved web design
Cyrus
Visit http://www.psdtoxhtmlcoder.com

Itransition

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.

Mike

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

Fisker

Nov 3, 2009 at 8:54 pm

good!

Andrew

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.

kai

Nov 14, 2009 at 1:55 pm

That’s cool.

ximumu

Nov 18, 2009 at 11:08 am

it is cool.thank you !

72color

Nov 29, 2009 at 9:41 pm

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

Mipovia

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.

vincentdresses

Jan 6, 2010 at 1:45 am

喜欢你们的设计与技术，常来看看

shaojie

Mar 20, 2010 at 1:30 am

thank you!

veilig2000

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!

Hemi

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.

Thanks,
Hemi

Mr wu

Aug 10, 2010 at 9:26 pm

Great feel with you are design Thanks for share

apple

Sep 21, 2010 at 8:07 am

fantastic and many cool

templateswork

Oct 7, 2010 at 10:26 am

very good and clean tutorial. thaks

Melvins

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

DrBenway

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!

mr.deng

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.

mikwillson

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