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