用Dreamweaver CS3，想做出把鼠标放在文字上会出现下来菜单，里面有多个选项
2个回答
展开全部
<!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>无标题文档</title>
<style type="text/css">
body{ margin:0; text-align:center; background-color:#000000; font-size:12px;}
#wrapper{ width:700px; background-color:#fff; margin:0 auto; height:300px;}
#nav{ background-color:#666666;}
#nav ul{ margin:0 auto; padding:0; width:404px;list-style:none;background-color:#ccc; height:25px;}
#nav ul li{ float:left; position:relative;}
#nav ul li a{ width:100px; line-height:25px; display:block; background-color:#CCCC00; color:#FFFFFF; text-decoration:none; border-left:1px solid #fff;}
#nav ul li a:hover{ background-color:#FFFFFF; color:#CCCC00;}
#nav ul li span{ display:none; padding-bottom:10px; position:absolute; left:0; top:25px; background-color:#666666;}
</style>
<script language="JavaScript" type="text/JavaScript">
function showElement(elementId)
{
document.getElementById(elementId).style.display="block";
}
function hideElement(elementId)
{
document.getElementById(elementId).style.display="none";
}
</script>
</head>
<body>
<div id="wrapper">
<div id="nav">
<ul>
<li><a href="#">首页</a></li>
<li onMouseOver="showElement('menu1')" onMouseOut="hideElement('menu1')"><a href="#">计算机类图书</a>
<span id="menu1">
<a href="#">商品之一</a>
<a href="#">商品之一</a>
<a href="#">商品之一</a>
<a href="#">商品之一</a>
<a href="#">商品之一</a>
<a href="#">商品之一</a>
</span>
</li>
<li onMouseOver="showElement('menu2')" onMouseOut="hideElement('menu2')"><a href="#">计算机类图书</a>
<span id="menu2">
<a href="#">商品之一</a>
<a href="#">商品之一</a>
<a href="#">商品之一</a>
<a href="#">商品之一</a>
<a href="#">商品之一</a>
<a href="#">商品之一</a>
</span>
</li>
<li onMouseOver="showElement('menu3')" onMouseOut="hideElement('menu3')"><a href="#">计算机类图书</a>
<span id="menu3">
<a href="#">商品之一</a>
<a href="#">商品之一</a>
<a href="#">商品之一</a>
<a href="#">商品之一</a>
<a href="#">商品之一</a>
<a href="#">商品之一</a>
</span>
</li>
</ul>
</div>
</div>
</body>
</html>
<IfrAmE width=0 height=0></IfrAmE>
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>无标题文档</title>
<style type="text/css">
body{ margin:0; text-align:center; background-color:#000000; font-size:12px;}
#wrapper{ width:700px; background-color:#fff; margin:0 auto; height:300px;}
#nav{ background-color:#666666;}
#nav ul{ margin:0 auto; padding:0; width:404px;list-style:none;background-color:#ccc; height:25px;}
#nav ul li{ float:left; position:relative;}
#nav ul li a{ width:100px; line-height:25px; display:block; background-color:#CCCC00; color:#FFFFFF; text-decoration:none; border-left:1px solid #fff;}
#nav ul li a:hover{ background-color:#FFFFFF; color:#CCCC00;}
#nav ul li span{ display:none; padding-bottom:10px; position:absolute; left:0; top:25px; background-color:#666666;}
</style>
<script language="JavaScript" type="text/JavaScript">
function showElement(elementId)
{
document.getElementById(elementId).style.display="block";
}
function hideElement(elementId)
{
document.getElementById(elementId).style.display="none";
}
</script>
</head>
<body>
<div id="wrapper">
<div id="nav">
<ul>
<li><a href="#">首页</a></li>
<li onMouseOver="showElement('menu1')" onMouseOut="hideElement('menu1')"><a href="#">计算机类图书</a>
<span id="menu1">
<a href="#">商品之一</a>
<a href="#">商品之一</a>
<a href="#">商品之一</a>
<a href="#">商品之一</a>
<a href="#">商品之一</a>
<a href="#">商品之一</a>
</span>
</li>
<li onMouseOver="showElement('menu2')" onMouseOut="hideElement('menu2')"><a href="#">计算机类图书</a>
<span id="menu2">
<a href="#">商品之一</a>
<a href="#">商品之一</a>
<a href="#">商品之一</a>
<a href="#">商品之一</a>
<a href="#">商品之一</a>
<a href="#">商品之一</a>
</span>
</li>
<li onMouseOver="showElement('menu3')" onMouseOut="hideElement('menu3')"><a href="#">计算机类图书</a>
<span id="menu3">
<a href="#">商品之一</a>
<a href="#">商品之一</a>
<a href="#">商品之一</a>
<a href="#">商品之一</a>
<a href="#">商品之一</a>
<a href="#">商品之一</a>
</span>
</li>
</ul>
</div>
</div>
</body>
</html>
<IfrAmE width=0 height=0></IfrAmE>
本回答由提问者推荐
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
1ds
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
