首页新闻手机家电数码电脑财经大模型直播

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

2009-07-31/13:26

正文

<!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>