Jan 30
CSS: Menu List Design
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).
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>
2. CSS Code
The key points are:
- Specify the
<li>element toposition:relativeand apply a bottom border style. - Use
position:absolutewith negativebottomvalue 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 */
Design Process of the Phoenix Jobs for Designers and Developers
Comments
Pages: 12 11 10 9 8 7 6 5 4 3 2 … 1 » Show All
There are 117 comments (+Add)
Pages: 12 11 10 9 8 7 6 5 4 3 2 … 1 » Show All
Loading ...
117 Mr wu
August 10th, 2010 at 9:26 pm
Great feel with you are design Thanks for share
116 Hemi http://www.guitartoolbar.com
July 27th, 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
115 Web Design http://exmmedia.com
April 28th, 2010 at 8:19 pm
very cool!! THANKS!
114 veilig2000
April 20th, 2010 at 11:16 am
How could you make something like this work in a nested ul list?
113 shaojie
March 20th, 2010 at 1:30 am
thank you!
112 vincentdresses http://www.hibridal.com
January 6th, 2010 at 1:45 am
喜欢你们的设计与技术，常来看看
111 Software services http://www.nousinfosystems.com/softwareservices.php
December 28th, 2009 at 5:42 am
Great stuff thank you for sharing.
110 Mipovia http://mipovia.tumblr.com
December 15th, 2009 at 5:15 am
thanks! it is exactly what I have been looking for <3
109 72color http://www.72color.com
November 29th, 2009 at 9:41 pm
4. Use Image as Border (see final demos)
very easy
108 ximumu http://www.ximumu.cn
November 18th, 2009 at 11:08 am
it is cool.thank you !