CSS菜单列表设计

这一CSS教程， 将向您展示如何使用CSS线条属性或者背景图片创建一个菜单列表， 这个技巧会在元素上定义 border-bottom 属性， 并使用绝对位置的将嵌套在里面的元素覆盖在线上。. 这是非常灵活的，你可以通过修改边线和背景图片轻易地更改设计，如果浏览器的字体是可缩放的, 那么它会相当的好用。

效果如下

Rates

• WordPress Coding100⁹⁵
• CSS Design250⁹⁵
• Support IE6 (extra)500⁹⁵

Services

• PhotoShop50⁰⁰
• Illustrator75⁰⁰
• Flash60⁰⁰

Sushi

• Spicy Hand Roll29⁹⁹
• Salmon Roll20⁹⁵
• Fire Dragon69⁹⁵

Sashimi

• Tuna2⁰⁰
• Salmon3⁵⁰
• White Fish4⁶⁰

1. HTML 代码

请看一下这里的 HTML 代码和图解, 这有助于你更好地理解后面的 CSS.

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

2. CSS 代码

重点在这里.

• 为 <li> 元素添加 position:relative 和应用 border-bottom 风格.
• 使用 position:absolute 和负数的 bottom 定位属性将下横线两端的元素下移并覆盖在线条上面.
• 注意: 请使用相对于字体尺寸 (em) 去控制边距.

.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. 变换线条风格

你可以简单地通过修改 CSS 和边距来变换 <li> 元素的风格.

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

4. 使用图片作为线条

你同样可以使用背景图片来实现菜单列表的线条.

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

5. IE6 版本

如果你还在使用满是 bug 的 IE6 浏览器, 你会发现布局不正常. 为了解决这个问题, 可以为 <li> 元素加入一些修复处理, 代码如下:

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