使用dl,dt,dd制作CSS垂直菜单

我一直在提倡不要使用列表来制作菜单，而且我一直在研究可以替换用列表制作菜单的方法。现在我依然反对使用无序列表来制作菜单，但我做了让步，用释义列表来制作CSS菜单比起无序列表要好多了。

通过释义列表你有两个不同的方法可以让你选择使用（或许是三个）

1.使用"dt"来作为导航标题，"dd"则作为导航链接
2.使用"dt"作为导航链接，"dd"则用来为连接做进一步说明。
3.使用"dt"作导航链接，"dd"作为连接的说明并可以在"dd"文字区域加上额外的链接。
比起无序列表使用释义列表可以更灵活且更容易地定义标签的样式，你甚至可以只针对连接进行样式化并忽略"dl"和"dt"它们的样式，或许"dd"的默认缩进是唯一需要删除的样式。

上面的菜单在"dl"里有张背景图片，在"dt"和"dd"也有背景图片，在碰到选择大号字体的时候这样就不会发生问题。

CSS代码：
#menu dl {width: 150px; margin: 0 auto; padding: 0 0 10px 0; background: #69c url(media/bottom.gif) no-repeat bottom left;}
#menu dt {margin:0; padding: 10px; font-size: 1.4em; font-weight:bold; color: #fff; border-bottom:1px solid #fff; background: #69c url(media/top.gif) no-repeat top left;}
#menu dd {margin:0; padding:0; color: #fff; font-size: 1em; border-bottom:1px solid #fff; background: #47a;}
#gallery a, #gallery a:visited {color:#fff; text-decoration:none; display:block; padding:5px 5px 5px 20px; background: #47a url(media/arrow.gif) no-repeat 10px 10px; width:125px; } #gallery a:hover {background: #258 url(media/arrowr.gif) no-repeat 11px 10px; color:#9cf;} ol li {font-size:11px;}




HTML代码：

网站运营

建站经验

策划盈利

站长聊吧

站长必读

网站优化

网站推广