61,129
社区成员




<style>
body {color:#fff;margin-top:-8px;}
#wrapper {color:#000;}
#info {margin-top:20px;}
#head {height:0px; border:0;}
#positioner {clear:both; position:relative; left:1px; z-index:100;}
.menu {display:block; position:absolute;}
.menu a.outer, .menu a.outer:visited
{ /* 定义menu的样式 */
color:#fff;
width:202px;
height:18px;
display:block;
background:#95A1D9;
border:1px solid #000;
margin-right:1px;
text-align:center;
float:left;
text-decoration:none;
font-family: verdana, arial, sans-serif;
font-size:14px;
line-height:18px;
overflow:hidden;
}
.menu a.outer:hover
{
background:blue;
overflow:visible;
}
.menu a.outer:hover table.first
{
display:block;
background:#eee;
border-collapse:collapse;
}
.menu a.inner, .menu a.inner:visited
{
display:block;
width:200px;
height:18px;
border-bottom:1px solid #000;
text-decoration:none;
color:#000;
font-family: verdana, arial, sans-serif;
font-size:12px;
text-align:center;
}
.menu a.inner:hover
{
background:#add;
}
</style>
<DIV id=wrapper>
<DIV id=head>
<DIV id=positioner>
<DIV class=menu>
<A target=content class=outer href="1.php">首页
<TABLE class=first>
<TR>
<TD>
<A target=content class=inner title="下拉1" href="1.php">下拉1</A>
<A target=content class=inner title="下拉2" href="2.php">下拉2</A>
</TD>
</TR>
</TABLE>
</A>
</DIV>
</DIV>
</DIV>
<DIV id=info>
</DIV>
</DIV>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>CSS Dropdown</title>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
.menu {
margin-left:10px;
margin-top:10px;
font-size: 12px;
position: relative;
z-index: 100;
}
.menu ul {
list-style: none;
}
.menu li {
float: left;
position: relative;
text-align: center;
}
.menu ul ul {
visibility: hidden;
position: absolute;
left: 0;
top: 20px;
}
.menu table {
position: absolute;
top: 0;
left: 0;
}
.menu ul li:hover ul,.menu ul a:hover ul {
visibility: visible;
}
.menu a {
display: block;
border: 1px solid black;
background-color: #95A1D9;
color: white;
padding: 2px 0;
text-decoration: none;
width:202px;
}
.menu a:hover {
background-color: blue;
border: 1px solid black;
}
.menu ul ul li {
clear: both;
font-size: 12px;
}
.menu ul ul li a {
width: 100px;
height: 14px;
color: black;
background-color: #EEE;
border: 1px solid black;
border-top: 0;
width: 202px;
text-align: center;
}
.menu ul ul li a:hover {
background-color: #add;
border: 1px solid black;
border-top: 0;
text-align: center;
}
</style>
</head>
<body>
<div class="menu">
<ul>
<li>
<a href="">首页 <!--[if IE 7]><!--> </a>
<!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul>
<li>
<a href="#">下拉1</a>
</li>
<li>
<a href="#">下拉2</a>
</li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
</ul>
</div>
<br />
<br />
<p>Some words</p>
</body>
</html>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>CSS Dropdown</title>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
.menu {
margin-left:10px;
margin-top:10px;
font-size: 14px;
position: relative;
z-index: 100;
}
.menu ul {
list-style: none;
}
.menu li {
float: left;
position: relative;
text-align: center;
width: 202px;
}
.menu ul ul {
visibility: hidden;
position: absolute;
left: 0px;
top: 20px;
}
.menu table {
position: absolute;
top: 0;
left: 0;
}
.menu ul li:hover ul,.menu ul a:hover ul {
visibility: visible;
}
.menu a {
display: block;
border: 1px solid black;
background-color: #95A1D9;
color: white;
padding: 2px 0px;
text-decoration: none;
}
.menu a:hover {
background: blue;
}
.menu ul ul li {
clear: both;
font-size: 12px;
}
.menu ul ul li a {
width: 200px;
height: 14px;
color: black;
background-color: #EEE;
/*
border-bottom: 1px solid black;
*/
text-align: center;
}
.menu ul ul li a:hover {
background-color: #add;
text-align: center;
}
</style>
</head>
<body>
<div class="menu">
<ul>
<li>
<a href="">首页 <!--[if IE 7]><!--> </a>
<!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul>
<li>
<a href="#">下拉1</a>
</li>
<li>
<a href="#">下拉2</a>
</li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
</ul>
</div>
<br />
<br />
<p>Some words</p>
</body>
</html>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>CSS Dropdown</title>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
.menu {
margin-left:10px;
margin-top:10px;
font-size: 12px;
position: relative;
z-index: 100;
}
.menu ul {
list-style: none;
}
.menu li {
float: left;
position: relative;
text-align: center;
width: 202px;
}
.menu ul ul {
visibility: hidden;
position: absolute;
left: 0px;
top: 20px;
}
.menu table {
position: absolute;
top: 0;
left: 0;
}
.menu ul li:hover ul,.menu ul a:hover ul {
visibility: visible;
}
.menu a {
display: block;
border: 1px solid black;
background-color: #95A1D9;
color: white;
padding: 2px 0px;
text-decoration: none;
}
.menu a:hover {
background: blue;
border: 1px solid black;
}
.menu ul ul li {
clear: both;
font-size: 12px;
}
.menu ul ul li a {
width: 100px;
height: 14px;
border: 0;
color: black;
background-color: #EEE;
border-bottom: 1px solid black;
width: 202px;
text-align: center;
}
.menu ul ul li a:hover {
border: 0;
background-color: #add;
border-bottom: 1px solid white;
width: 202px;
text-align: center;
}
</style>
</head>
<body>
<div class="menu">
<ul>
<li>
<a href="">首页 <!--[if IE 7]><!--> </a>
<!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul>
<li>
<a href="#">下拉1</a>
</li>
<li>
<a href="#">下拉2</a>
</li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
</ul>
</div>
<br />
<br />
<p>Some words</p>
</body>
</html>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=GB2312">
<title>Insert title here</title>
<style>
/* 清除掉多余的空白,否则在FF和IE上显示不一样 */
* {
margin:0;
padding:0;
}
/* 整体样式 */
body {
text-decoration:none;
font-family: verdana, arial, sans-serif;
font-size:14px;
}
/* 设置菜单的位置 */
.menu {
margin-left:20px;
margin-top:20px;
}
/* 什么都不做时的样式(把多余的部分隐藏起来) */
.menu ul.outer {
width:202px;
height:18px;
background-color:#95A1D9;
border:1px solid black;
overflow:hidden;
text-align:center;
}
/* 每一项的默认样式 */
ul.outer li {
list-style-type:none;
border-bottom:1px solid black;
}
/* 当鼠标放在第一项时,把隐藏的部分显示出来 */
.menu ul.outer:hover {
overflow:visible;
}
/* 第一项,也就是“首页”的默认样式 */
.menu ul.outer li.first {
color:white;
}
/* 当鼠标放到第一项时的样式 */
.menu ul.outer li.first:hover {
background-color:blue;
}
/* 非第一项 */
.menu ul.outer li.item {
background-color:#EEE;
color:black;
}
/* 非第一项,当鼠标放在上面时的样式 */
.menu ul.outer li.item:hover {
background-color:#ADD;
color:black;
}
</style>
</head>
<body>
<div class="menu">
<ul class="outer">
<li class="first">homempage</li>
<li class="item">dropdown1</li>
<li class="item">dropdown2</li>
</ul>
</div>
</body>
</html>