下拉菜单

<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
#menu{
margin:0;
padding:0;
width:610px;
list-style-type:none;
font-family:Arial, Helvetica, sans-serif;
font-size:14px;
}
#menu li{
float:left;
width:150px;
padding:0px;
margin:0 1px 0 0;
}
#menu li dl{
margin:0;
padding:0 0 10px 0;
}
#menu li dt{
margin:0;
padding:5px;
text-align:center;
border-bottom:1px solid #b00;
background:#ed8;
}
#menu li dt a,#menu li dt a:visited
{
display:block;
color:#333;
text-decoration:none;
}
#menu li dd
{
margin:0;
padding:0;
color:#fff;
background:#47a;
}
#menu li dd.last
{
border-bottom:1px solid #b00;
}
#menu li dd a,#menu li dd a:visited
{
display:block;
color:#fff;
text-decoration:none;
padding:4px 5px 4px 20px;
background:#47a;
}
#menu li dd
{
display:none;
}
#menu li:hover dd
{
display:block;
}
#menu li dd a:hover
{
background:#147;
color:#9cf;
}
</style>
</head>

<body>
<ul id="menu">
    <li>
        <dl>
            <dt><a href="#">Artech Studio</a></dt>
            <dd><a href="#">Web Dev</a></dd>
            <dd><a href="#">Web Design</a></dd>
            <dd><a href="#">Books</a></dd>
            <dd class="last"><a href="#">Contact</a></dd>
        </dl>
    </li>
</ul>
</body>
</html>
posted @ 2008-06-14 15:21  单车骑客  阅读(303)  评论(0)    收藏  举报