方案一（js）：
參考文章：http://msdn2.microsoft.com/en-us/library/ms533025.aspx
－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－
可以用window.createPopup()實現
<html>
<head>
<title>網頁跨框架菜單 from MSDN</title>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
</head>
<frameset rows="92,*" cols="*" framespacing="4" frameborder="yes" border="4">
<frame src="top.htm" name="topFrame" scrolling="NO" >
<frame src="bottom.htm" name="mainFrame">
</frameset>
<noframes><body>
</body></noframes>
</html>
/////////////////////**top.htm**//////////////////////////////////////////////////
<html>
<head>
<title>MSDN的示例</title>
<script>
var oPopup = window.createPopup();
function richContext()
{
var lefter2 = event.offsetY+0;
var topper2 = event.offsetX+15;
oPopup.document.body.innerHTML = oContext2.innerHTML;
oPopup.show(topper2, lefter2, 210, 84, contextobox);
}
</script>
</head>
<body>
<span id="contextobox" style=" cursor:hand; margin-left:5px; margin-right:10px; background:#e4e4e4; width:300; height:40; padding:20px;" οncοntextmenu="richContext(); return false" >Right-click inside this box.</span>
<DIV ID="oContext2" STYLE="display:none">
<DIV STYLE="position:relative; top:0; left:0; border:2px solid black; border-top:2px solid #cccccc; border-left:2px solid #cccccc; background:#666666; height:110px; width:207px;">
<DIV STYLE="position:relative; top:0; left:0; background:#cccccc; border:1px solid black; border-top: 1px solid white; border-left:1px solid white; height:20px; color:black; font-family:verdana; font-weight:bold; padding:2px; padding-left:10px; font-size:8pt;
cursor:hand" οnmοuseοver="this.style.background='#ffffff'" οnmοuseοut="this.style.background='#cccccc'" οnclick="parent.location.href='http://www.microsoft.com';">
Home</DIV>
<DIV STYLE="position:relative; top:0; left:0; background:#cccccc; border:1px solid black; border-top: 1px solid white; border-left:1px solid white; height:20px; color:black; font-family:verdana; font-weight:bold; padding:2px; padding-left:10px; font-size:8pt;
cursor:hand" οnmοuseοver="this.style.background='#ffffff'" οnmοuseοut="this.style.background='#cccccc'" οnclick="parent.location.href='http://search.microsoft.com';">
Search</DIV>
<DIV STYLE="position:relative; top:0; left:0; background:#cccccc; border:1px solid black; border-top: 1px solid white; border-left:1px solid white; height:20px; color:black; font-family:verdana; font-weight:bold; padding:2px; padding-left:10px; font-size:8pt;
cursor:hand" οnmοuseοver="this.style.background='#ffffff'" οnmοuseοut="this.style.background='#cccccc'" οnclick="parent.location.href='http://www.microsoft.com/ie';">
Intenet Explorer</DIV>
<DIV STYLE="position:relative; top:0; left:0; background:#cccccc; border:1px solid black; border-top: 1px solid white; border-left:1px solid white; height:20px; color:black; font-family:verdana; font-weight:bold; padding:2px; padding-left:10px; font-size:8pt;
cursor:hand" οnmοuseοver="this.style.background='#ffffff'" οnmοuseοut="this.style.background='#cccccc'" οnclick="parent.location.href='http://www.microsoft.com/info/cpyright.htm';">
©2001 Microsoft Corporation</DIV>
</DIV>
</body>
</html>
/////////////////////**bottom.htm**//////////////////////////////////////////////////
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
</head>
<body>
本例是從MSDN中的Using the Popup Object一文中簡化而來的.
Popup Object還有很多強大的功能,強烈建議大家都看看Using the Popup Object一文.
</body>
</html>
方案二（css）：
分爲多個頁面
======================= index.html =========================
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<HTML>
<HEAD>
<TITLE></TITLE>
<LINK href="style/dropdown.css" type=text/css rel=stylesheet>
<style>
<!--
body {
text-align:center;
border:0px;
border-top:0px;
font-size: 8px;
font-family: Tahoma;
}
-->
</style>
</HEAD>
<script type="text/javascript">
function onover(obj){
document.getElementByIdx_x_x(obj).style.display='block';
}
function onout(obj){
document.getElementByIdx_x_x(obj).style.display='none';
}
</script>
<BODY BGCOLOR="#EFF7FF" style="width:990px;margin: auto;background-image:url('<%=path%>/images/bground.gif')">
<div id="top" style="margin: auto;">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr align="center">
<td colspan="3">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="1%" rowspan="2">
<img src="<%=path%>/images/top_01.jpg">
</td>
<td width="98%" height="39" align="left" >
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td height="39" align="right">
</td>
</tr>
</table>
</td>
<td width="1%" rowspan="2">
<img src="<%=path%>/images/top_04.jpg" style="display: none;" width="11" height="72">
</td>
</tr>
<tr>
<td height="33" background="<%=path%>/images/top_06.jpg" style="float: left; border-bottom: 2px; border-bottom-color: #000000;" align="left">
<div id="dropdown" style="z-index: 20;" class="menu">
<ul>
<li>
<a href=##" target="main" _fcksavedurl="index.jsp">首頁</a>
</li>
<li οnmοuseοver="onover('test2')"
οnmοuseοut="onout('test2')">
<a href="##">下拉菜單</a>
<ul id="test2" style="position: absolute;">
<li>
<a class="hide"
href="##"
target="main"
_fcksavedurl="##">下拉菜單</a>
</li>
<li>
<a class="hide"
href="##"
target="main"
_fcksavedurl="##">下拉菜單</a>
</li>
<li>
<a class="hide"
href="##"
target="main"
_fcksavedurl="##">下拉菜單</a>
</li>
</ul>
</li>
<li οnmοuseοver="onover('test1')"
οnmοuseοut="onout('test1')">
<a href="##">下拉菜單</a>
<ul id="test1" style="position: absolute;">
<li>
<a class="hide"
href="##"
target="main"
_fcksavedurl="##">下拉菜單</a>
</li>
<li>
<a class="hide"
href="##"
target="main"
_fcksavedurl="##">下拉菜單</a>
</li>
<li>
<a class="hide"
href="##"
target="main"
_fcksavedurl="##">下拉菜單</a>
</li>
<li>
<a class="hide"
href="##"
target="main"
_fcksavedurl="##">下拉菜單</a>
</li>
<li>
<a class="hide"
href="##"
target="main"
_fcksavedurl="##">下拉菜單</a>
</li>
<li>
<a class="hide"
href="##"
target="main"
_fcksavedurl="##">下拉菜單</a>
</li>
<li>
<a class="hide"
href="##"
target="main"
_fcksavedurl="####">下拉菜單</a>
</li>
<li>
<a class="hide"
href="##"
target="main"
_fcksavedurl="##">下拉菜單</a>
</li>
<li >
<a class="hide"
href="##"
target="main"
_fcksavedurl="##">下拉菜單</a>
</li>
<li>
<a class="hide"
href="##"
target="main"
_fcksavedurl="##">下拉菜單</a>
</li>
</ul>
</li>
<li οnmοuseοver="onover('test3')"
οnmοuseοut="onout('test3')">
<a href="##" target="main" _fcksavedurl="index.jsp" title="建設中...">下拉菜單</a>
<ul id="test3">
<li>
<a class="hide" style="display:none;"
href="##"
target="main"
_fcksavedurl="##">下拉菜單</a>
</li>
<li>
<a class="hide" style="display:none;"
href="##"
target="main"
_fcksavedurl="##">下拉菜單</a>
</li>
</ul>
</li>
<li οnmοuseοver="onover('test6')"
οnmοuseοut="onout('test6')">
<a id="a" href="##" _fcksavedurl="index.jsp">下拉菜單</a>
<ul id="test6">
<li>
<a class="hide" href="##"
target="main" _fcksavedurl="##">下拉菜單</a>
</li>
</ul>
</li>
</ul>
</div>
</td>
</tr>
</table>
</td>
</tr>
<tr style="" align="center">
<td>
<iframe id="left" src="left.html" width=140px; style="padding: 0px;margin:0px; border: 0px;"
scrolling="no" marginwidth="0" marginheight="0" height="1000"></iframe>
</td>
<td>
<iframe id="mid" src="mid.html" width=10px; style="padding: 0px; margin:0px; border: 0px;"
scrolling="no" marginwidth="0" marginheight="0" height="1000"></iframe>
</td>
<td>
<iframe id="main" src="main.html" width=840px; name="main" style="padding: 0px;margin:0px; border: 0px;z-index:-100;"
scrolling="no" marginwidth="0" marginheight="0" height="1000"></iframe>
</td>
</tr>
</table>
</div>
</BODY>
</HTML>
===========================main.html==============================
<html>
<head>
<title>main.html</title>
</head>
<body style="height:500px;">
這是main頁面
</body>
</html>
===========================min.html==============================
<html>
<head>
<title>min.html</title>
</head>
<body style="height:500px;">
這是min頁面
</body>
</html>
===========================left.html==============================
<html>
<head>
<title>left.html</title>
</head>
<body style="height:500px;">
這是left頁面
</body>
</html>
======================= dropdown.css =====================
.menu {font-family: arial, sans-serif; width:auto;position:absolute; padding-top: 10px;padding-left: 8px; font-size:11px;}
.menu ul li a, .menu ul li a:visited {display:block; text-decoration:none; color:#000;width:99px; height:20px; text-align:center; color:#000; border:1px solid #ccc; line-height:20px; font-size:11px;}
.menu ul {padding:0; margin:0;list-style-type: none; }
.menu ul li {float:left; margin-right:1px; position:relative;}
.menu ul li ul {display: none;}
.menu ul li:hover a {color:#fff; background:#4a7ec7;}
.menu ul li:hover ul {display:block; position:absolute; top:21px; left:0; width:150px;}
.menu ul li ul { position:absolute; top:21px; left:0; width:150px;}
.menu ul li:hover ul li a.hide {background:#fff; color:#000;}
.menu ul li:hover ul li:hover a.hide {background:#4a7ec7; color:#ffffff;}
.menu ul li:hover ul li ul {display:block;}
.menu ul li:hover ul li a {display:block; background:#ddd; color:#000;}
.menu ul li:hover ul li a:hover {background:#4a7ec7; color:#ffffff;}
.menu ul li:hover ul li:hover ul {display:block; position:absolute; left:105px; top:0;}
.menu ul li:hover ul li:hover ul.left {left:-105px;}
li a.hide {background:#fff; color:#4a7ec7;}
ul li a:hover {background:#4a7ec7; color:#ffffff;}
ul li:hover a {color:#ffffff; background:#4a7ec7;}
轉載請註明原文地址：http://blog.sina.com.cn/s/blog_95153c7101019dtd.html