自定义搜索
上一篇:La style(舞蹈视频)
下一篇:今天英女王来到加拿大;
用CSS制作下拉菜单
米娅 2010年6月28日 16:52:35

代码如下:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>用CSS制作下拉菜单</title>

<style type="text/css">

.menu_2
{
font-family: verdana, sans-serif;
width:50px;
position:relative;
font-size:0.80em;
padding-bottom:0px;
float:left;
background-color:#BEBE7E;
}

.menu_2 ul
{
padding:0;
margin:0;
list-style-type: none;
}

.menu_2 ul li
{
float:left;
position:relative;
}

.menu_2 ul li a, .menu_2 ul li a:visited
{
display:block;
text-decoration:none;
color:#000;
width:50px;
height:1.5em;
padding-left:0px;
line-height:2em;
border:1px solid #fff;
border-width:1px 1px 0 0;
}
 
.menu_2 ul li ul
{
position:absolute;
top:1.5em;
margin-top:0px;
width:50px;
display:none;
}
 
.menu_2 ul li:hover ul
{
display:block;
position:absolute;
top:1.5em;
margin-top:0px;
width:70px;
left: 0;
}

.menu_2 ul li:hover ul li a
{
display:block;
background:#faeec7;
color:#000;
height:auto;
line-height:1.2em;
padding:2px 2px;
width:75px
}
 
.menu_2 ul li:hover ul li a:hover
{
background:#c9c9a7;
color:#000;
}
</style>
</head>

<body>
<table>
<tr>
<td>
<div class="menu_2">
<ul >
<li  ><a class="drop" href="">+菜单</a>
<ul>
<li><a href="http://coolder.com/" title="">选项1</a></li>
<li><a href="http://coolder.com/" title="">选项2</a></li>
</ul>
</li></ul></div>
</tr></table>
</body></html>


共1页
相关链接