高手请进，如何实现下面的web菜单目录？？？

Question

<style>
div.menu{
border-left:10px solid #369;
background:#69c;
font-size:14px;
padding:4px;
cursor:pointer;
margin:1px 0;
}
ul.sub-menu {
border-left:10px solid #369;
list-style:none;
margin:2px 0;
font-size:14px;
display:none;
}
ul.sub-menu li{
margin:1px 0;
background:#9cF;
padding:4px;
}
</style>
<div class="menu" onclick="toggle('sm1')">会员专区</div>
<ul class="sub-menu" id="sm1">
<li><a href="#">会员登录</a></li>
<li><a href="#">注册会员</a></li>
</ul>
<div class="menu" onclick="toggle('sm2')">业务查询</div>
<ul class="sub-menu" id="sm2">
<li><a href="#">归属地查询</a></li>
<li><a href="#">营业厅导航</a></li>
<li><a href="#">缴费历史查询</a></li>
</ul>
<script language="javascript">
<!--
function toggle(m){
var m = document.getElementById(m);
m.style.display = m.style.display != "block" ? "block" : "none";
}
//-->
</script>

Answer 1

ff下显示有点问题，修改一下
<style>
div.menu{
border-left:10px solid #369;
background:#69c;
font-size:14px;
padding:4px;
cursor:pointer;
margin:1px 0;
}
ul.sub-menu {
border-left:10px solid #369;
list-style:none;
margin:2px 0;
padding:0;
font-size:14px;
display:none;
}
ul.sub-menu li{
margin:1px 0;
background:#9cF;
padding:4px;
}
</style>
<div class="menu" onclick="toggle('sm1')">会员专区</div>
<ul class="sub-menu" id="sm1">
<li><a href="#">会员登录</a></li>
<li><a href="#">注册会员</a></li>
</ul>
<div class="menu" onclick="toggle('sm2')">业务查询</div>
<ul class="sub-menu" id="sm2">
<li><a href="#">归属地查询</a></li>
<li><a href="#">营业厅导航</a></li>
<li><a href="#">缴费历史查询</a></li>
</ul>
<script language="javascript">
<!--
function toggle(m){
var m = document.getElementById(m);
m.style.display = m.style.display != "block" ? "block" : "none";
}
//-->
</script>

Answer 2

to ：ice_berg16(寻梦的稻草人) 
---------------------------------------
我试了你给的代码，现在还存在几个问题
（1）怎么能够使得当一个菜单打开时，另一个菜单关闭。
（2）菜单项应为提供超链接，都有一个下划线，怎么能够去掉。如同网页中提供的那样
（3）关于菜单项的使用，能不能在框架中使用，菜单项放在左框架中，在主框架中显示链接页面的内容。如何实现？谢谢~~

Answer 3

<style>
div.menu{
border-left:10px solid #369;
background:#69c;
font-size:14px;
padding:4px;
cursor:pointer;
margin:1px 0;
}
ul.sub-menu {
border-left:10px solid #369;
list-style:none;
margin:2px 0;
padding:0;
font-size:14px;
display:none;
}
ul.sub-menu li{
margin:1px 0;
background:#9cF;
padding:4px;
}
/* -----------------  设置链接的css样式即可 -----------------------  */
.sub-menu a{
text-decoration:none;
color:#036;
}
</style>
<div class="menu" onclick="toggle('sm1')">会员专区</div>
<ul class="sub-menu" id="sm1">
<li><a href="#">会员登录</a></li>
<li><a href="#">注册会员</a></li>
</ul>
<div class="menu" onclick="toggle('sm2')">业务查询</div>
<ul class="sub-menu" id="sm2">
<li><a href="#">归属地查询</a></li>
<li><a href="#">营业厅导航</a></li>
<li><a href="#">缴费历史查询</a></li>
</ul>
<script language="javascript">
<!--
var last = null;
function toggle(m){
if(last) last.style.display = "none";
var m = document.getElementById(m);
m.style.display = m.style.display != "block" ? "block" : "none";
last = m;
}
//-->
</script>----------------------
3.通过指定链接的target="mainFrame"即可(mainFrame为主框架frame的name)

Answer 4

to ：ice_berg16(寻梦的稻草人) 
---------------------------------------
还是第一个问题，当一个菜单打开时，另一个菜单关闭，并且再次点击已打开的页面时，他也关闭，怎么实现，我对脚本不懂，望指教

Answer 5

修改一下toggle函数
function toggle(m){
var m = document.getElementById(m);
if(last && last != m) last.style.display = "none";
m.style.display = m.style.display != "block" ? "block" : "none";
last = m;
}

Answer 6

to ：ice_berg16(寻梦的稻草人) 
---------------------------------------
谢谢你的回答，基本能够实现功能。这儿还有几个问题，盼望你给解答（1）链接的时候是这样写的，没问题吧？
<a target="main" href="../Market/Year.aspx">会员登录</a>（2）在测试时发现，第一次运行的时候非常慢，每个页面都是如此，以后就快了，怎么能够提高速度阿？是不是加了框架了原因，如果不用框架结构，速度应该能够提高把，那样怎么实现，思路？

Answer 7

.net页面在第一次加载的时候需要编译
自然比较慢。

Answer 8

都发布了，不就已经编译好了吗？怎么还编译？大家看看我的代码有问题吗？
在左框架通过超链接在主框架显示内容。
左框架代码：<a href="WebForm9.aspx" target="main">ff</a>然后在主框架显示webform9.aspx页面的内容。但是我调试了发现，第一次点击超链接按钮时，过一会儿才能进入到webform9页面中，所以很慢。再次点击时立刻就进入该页面了。我想是页面缓存的问题吧，如何能解决，因为第一次是在太慢了，无法忍受，必须要处理了。大家给点建议，~~~