这个CSS菜单比较特别

2024-09-05 12:19:31

字体：大中小

来源：转载

供稿：网友

这个CSS菜单比较特别，估计用的地方也很特别，如果你的网站是黑色风格的话，那用这款比较不错，纯CSS代码实现，响应鼠标悬停，滑过变色，它不是用的UL、LI列表，而是用的DT，因此，对不懂DT用法的朋友也是一个学习参考。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><title>很特别是的CSS菜单</title><meta http-equiv="Content-Type" content="text/html; charset=gb2312" /><style>dl#artist dt { display:none; }dl#artist dd { padding:0; margin:0; }a.xmenu, a.xmenu:visited { display:block; width:5em; height:3em; background:#000; text-decoration:none; text-align:center; color:#aaa; float:left; }a.xmenu span, a.xmenu:visited span { display:block; width:3em; height:0.5em; border-top:0.5em solid #000; border-left:1em solid #000; border-right:1em solid #000; border-bottom:0.5em solid #000; background:#050; overflow:hidden; }* html a.xmenu span, * html a.xmenu:visited span { width:5em; height:1.5em; w/idth:3em; he/ight:0.5em; overflow:hidden; }a.xmenu:hover { color:#ff0; }a.xmenu:hover span { background:#0f0; }</style></head><body><dl id="artist"><dt>Artists menu</dt> <dd> Matisse </dd> <dd> Cezanne </dd> <dd> Turner </dd> <dd> Monet </dd> <dd> Lowry </dd></dl></body></html>

上一篇：立体按钮效果的竖直菜单

下一篇：带滑过标记的竖向排列CSS菜单