日期:2014-05-16  浏览次数:20380 次

用脚本如何实现子菜单的显示?
显示效果要求: 进入CSDN网站的"我的空间"页面后,把鼠标放在菜单上面,下面能显示相应的一些子菜单.  
最好能给具体的一些 JavaScript脚本代码!

------解决方案--------------------
说的是滑动门吗??
------解决方案--------------------
你随便搜索CSS滑动门或者JS滑动门,很多啊
------解决方案--------------------
去下个jk_10000工具箱里面就有了,帮你帖出其中一个
到这里下载
http://download.csdn.net/user/jk_10000
HTML code
<HTML>

<HEAD>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>JK:支持民族工业,尽量少买X货</title>
<STYLE type="text/css">
.menuUl {
 width:150px;border:#888888 1px solid;position:absolute;left:0px;top:17px;display:none;
}
.menuLi {
 width:150px;border:#888888 1px solid;position:relative;background-color:white;height:18px;display:inline;
}
.menuUl .menuUl {
 left:149px;top:2px;
}
.menuUl .menuLi {
 display:block;
}

.menuLi A{
 color:#0044ff;text-decoration:none;font:14px verdana;
}
.menuLi A:hover {
 background-color:#f0d0d0; 
}
</STYLE>
<SCRIPT language=javascript src="Menu_MouseFun.js"></SCRIPT>
</head>

<BODY>
<div style="font-size:10pt;">
注1:部分代码来自gu1dai(异域苍穹......追夢人):http://community.csdn.net/Expert/topic/4123/4123998.xml?temp=.4086878<br/>
注2:TopMenu与LeftMenu可以通过改变css来互换<br/>
<br/>
注:本页面仅在IE6/FireFox1.5下测试过。其它浏览器或其它版本未经测试。<br/>    
注-----:作者JK:<a href="mailTo:jk_10000@yahoo.com.cn?subject=About%20TopMenu/LeftMenu">JK_10000@yahoo.com.cn</a><br/>    
<hr/>
</div>
<div onmouseover="Menu_mouseover(event,this);" onmouseout="Menu_mouseout(event,this);" >
  <div class="menuLi" >
    <A href="#">Services</A>
    <div class="menuUl" >
      <div class="menuLi" >
        <A href="#">Web Design</A>
        <div class="menuUl" >
          <div class="menuLi" ><A href="#">Web Design->sub</A></div>
          <div class="menuLi" ><A href="#">Web Design->sub2</A></div>
          <div class="menuLi" >
            <A href="#">Web Design->sub3</A>
            <div class="menuUl" >
              <div class="menuLi" ><A href="#">Web Design->3</A></div>
              <div class="menuLi" ><A href="#">Web Design->3</A></div>
              <div class="menuLi" ><A href="#">Web Design->3</A></div>
            </div>
          </div>
        </div>
      </div>
      <div class="menuLi" ><A href="#">Internet Marketing</A></div>
      <div class="menuLi" ><A href="#">Hosting</A></div>
      <div class="menuLi" ><A href="#">Domain Names</A></div>
      <div class="menuLi" ><A href="#">Broadband</A></div>
    </div>
  </div>
  <div class="menuLi" >
    <A href="#">Services</A>
    <div class="menuUl" >
      <div class="menuLi" >
        <A href="#">Web Design</A>
        <div class="menuUl" >
          <div class="menuLi" ><A href="#">Web Design->sub</A></div>
          <div class="menuLi" ><A href="#">Web Design->sub2</A></div>
          <div class="menuLi" >
            <A href="#">Web Design->sub3</A>