定义列表+CSS制作的垂直菜单

赵人无名 · 发表于 2013-4-19 08:33:57

[code=Xml width=600px]<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "">
<html xmlns="">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<meta http-equiv="content-language" content="gb2312" />
<title>dl,dt,dd制作的CSS垂直菜单</title>
<style type="text/css">
body {
  font-size: 12px;
  margin: 0;
}
#menu dl {
  margin: 0 auto;
  padding: 0 0 10px 0;
  width: 150px;
  background: #69c;
}
#menu dt {
  margin: 0;
  padding: 10px;
  background: #69c;
  color: #fff;
  font-size: 1.4em;
  font-weight: bold;
  border-bottom: 1px solid #fff;
}
#menu dd {
  margin: 0;
  padding: 0;
  background: #47a;
  color: #fff;
  font-size: 1em;
  border-bottom:1px solid #fff;
}
#gallery a, #gallery a:visited {
  display:block;
  padding:5px 5px 5px 20px;
  width:125px;
  background: #47a;
  color:#fff;
  text-decoration:none;
}
#gallery a:hover {
  background: #258;
  color:#9cf;
}
</style>
</head>

<body>
<div id="menu">
  <dl id="gallery">
<dt>Gallery</dt>
<dd><a href="#" title="Paul Cezanne">Paul Cezanne</a></dd>
<dd><a href="#" title="Henri Matisse">Henri Matisse</a></dd>
<dd><a href="#" title="Vincent van Gogh">Vincent van Gogh</a></dd>
<dd><a href="#" title="William Turner">William Turner</a></dd>
<dd><a href="#" title="John Constable">John Constable</a></dd>
<dd><a href="#" title="Claude Monet">Claude Monet</a></dd>
  </dl>
</div>
</body>
</html>[/code]

		自动登录	找回密码
密码			立即注册

[特效代码] 定义列表+CSS制作的垂直菜单

站长推荐 /1