纵向弹出菜单问题

Question

用JAVASCRIPT怎么实现纵向弹出鼠标停在子菜单上的问题能不能帮忙看看~ 谢谢
<script type="text/javascript">
   window.onload = function() {
     var ul = document.getElementById('menu');
     //下面该怎么实现啊?        };
</script>
<style type="text/css">
ul.menu {
   width:90px;
   height:25px;
}
ul.menu li {
   position:relative;  
}
ul.menu li ul{
    display:none;
    position:absolute;
    top:0;
    left:100px;
}
ul.menu li ul li a {
   width:80px;
   height:24px;
   display:block;
}</style><ul id="menu">
<li>
 <a href="###">菜单1</a>
 <ul>
   <li><a href="###">子菜单a</a></li>
   <li><a href="###">子菜单b</a></li>
 </ul></li>
<li>
   <a href="###">菜单2</a>
   <ul>
      <li><a href="###">子菜单c</a></li>
      <li><a href="###">子菜单d</a></li>
   </ul>
</li>
<li><a href="###">菜单3</a></li>
</ul>

Answer 1

我不想用JQUERY,因为刚学JAVASCRIPT,

Answer 2

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script> 
<script type="text/javascript">
   window.onload = function() {
     $("#menu li").mouseenter(
function ()
{
$(this).find('ul').show();
}
).mouseleave (
function ()
{
$(this).find('ul').hide();
}
);
   };
</script>
<style type="text/css">
ul.menu {
   width:90px;
   height:25px;
}
ul.menu li {
   position:relative;  
}
ul.menu li ul{
    display:none;
    position:absolute;
    top:0;
    left:100px;
}
ul.menu li ul li a {
   width:80px;
   height:24px;
   display:block;
}#menu ul {
display:none;
}</style><ul id="menu">
<li>
 <a href="###">菜单1</a>
 <ul>
   <li><a href="###">子菜单a</a></li>
   <li><a href="###">子菜单b</a></li>
 </ul></li>
<li>
   <a href="###">菜单2</a>
   <ul>
      <li><a href="###">子菜单c</a></li>
      <li><a href="###">子菜单d</a></li>
   </ul>
</li>
<li><a href="###">菜单3</a></li>
</ul>

Answer 3

不想用jq就用js的函数吧。一样道理。
用js要处理些冒泡问题

Answer 4

代码如下:
我现在遇到的主要问题是,鼠标不能停留在二级菜单上,用relatedTarget不支持IE,这个怎么解决啊.
帮忙看看,JS代码如下<ul class="menu">
<li class="write">
<a href="###">菜单A</a>
<ul>
<li><a href="###">A</a></li>
<li><a href="###">B</a></li>
<li><a href="###">C</a></li>
</ul>
</li>
<li class="write">
<a href="###">菜单B</a>
<ul>
<li><a href="###">D</a></li>
<li><a href="###">E</a></li>
<li><a href="###">F</a></li>
</ul>
</li>
</ul>
window.onload = function() {
var list,menus=[];
// lists = document.body.getElementsByClassName('menu');
list = getByClass('menu')[0];
var lis = list.childNodes;
var li,a,ul;

for (var i=0;i<lis.length;i++) {
if (lis[i].tagName == 'LI') {
a = firstChild(lis[i]);
ul = next(a);
bind(a,ul);
}
}

var timeoutId = null;
function bind(a,ul) {
a.onmouseover = function() {
ul.style.display='block';
};
ul.onmouseout = function () {
ul.style.display = 'none';
}
a.onmouseout = function () {
//就在这边出的问题,鼠标停留不了,用relatedTarget不支持IE

ul.style.display='none';

};
}


};
//返回指定节点的第一个子元素
function firstChild(node) {
if (node.firstChild) {
if (node.firstChild.nodeType == 1) return node.firstChild;
else {
var n = node.firstChild;
    while (n = n.nextSibling) {
if (n.nodeType == 1) return n;
}
return null;
}
}
return null;
}
//返回node的下一个兄弟元素
function next(node) {
if (node.nextSibling) {
if (node.nextSibling.nodeType == 1) return node.nextSibling;
else {
var n = node.nextSibling;
    while (n = n.nextSibling) {
if (n.nodeType == 1) return n;
}
return null;
}
}
return null;
}function getByClass(className,context) {
context = context || document;
if (context.getElementsByClassName) {
return context.getElementsByClassName(className);
}
var nodes = context.getElementsByTagName('*'),
    ret = [];
for (var i=0;i<nodes.length;i++) {
if (hasClass(nodes[i],className)) ret.push(nodes[i]);
}
return ret;
}
function hasClass(node,className) {
var names = node.className.split(/\s+/);
for (var i=0;i<names.length;i++) {
if (names[i]==className) return true;
}
return false;
}

Answer 5

我不想用ID抓取,想用CLASS,所以多了几个函数(这个都是从视频里面学来的,呵~~)其实主要的还是鼠标不能停留在二级菜单上 

Answer 6

要不你放在你的电脑上运行一下,看看能不能帮忙实现,CSS如下ul.menu {
width:95px;
}
ul.menu li {
height: 24px;
line-height: 24px;
position:relative;
}
ul.menu li ul {
display:none;
width:90px;
position:absolute;
top:0;
left:100px;
}
ul.menu li ul li a {
width:80px;
height:24px;
display:block;
}
ul.menu li ul li a:hover {
background:#ddd;
text-decoration:none;
}

Answer 7

 <script type="text/javascript"> 
 var G = function (id){ return document.getElementById(id); }
 var C = function (tag){ return document.createElement(tag); }
 window.onload = function() {
var menu = function ()
{
this.menu = G('menu');
this.menu.innerHTML = '';
this.add = function (t_arr, c_arr)
{
var li;
li = C('li');
li.a = C('a');
li.a.href = t_arr.url;
li.a.innerHTML = t_arr.text;
li.ul = C('ul');
li.onmouseover = function () { li.ul.style.display = 'block'; }
li.onmouseout = function () { li.ul.style.display = 'none'; }
for (key in c_arr)
{
var t = C('li');
t.a = C('a');
t.a.href = c_arr[key].url;
t.a.innerHTML = c_arr[key].text;
t.appendChild(t.a);
li.ul.appendChild(t);
}
li.appendChild(li.a);
li.appendChild(li.ul);
this.menu.appendChild(li);
}
}
var ogject = new menu();
ogject.add({'text':'菜单1','url':'#'},[{'text':'菜单A','url':'#'},{'text':'菜单B','url':'#'}]);
ogject.add({'text':'菜单2','url':'#'},[{'text':'菜单C','url':'#'},{'text':'菜单D','url':'#'}]);    }; 
  </script> 
<style type="text/css"> 
 ul.menu { 
    width:90px; 
    height:25px; 
 } 
 ul.menu li { 
    position:relative;   
 } 
 ul.menu li ul{ 
     display:none; 
     position:absolute; 
     top:0; 
     left:100px; 
 } 
 ul.menu li ul li a { 
    width:80px; 
    height:24px; 
    display:block; 
 } 
  
 #menu ul { 
  display:none; 
 } 
  
</style> 
  
<ul id="menu"> </ul> 
  

Answer 8

#要不你放在你的电脑上运行一下,看看能不能帮忙实现,CSS如下
#11楼
曾经用css写过。但现在不记得为什么不用css了。应该有些问题。
有段时间不写js了。有点生疏。

Answer 9

你的代码要改两个地方就行了。
 bind(lis[i],ul); ul.menu { 
    width:190px; 
    height:25px; 
 } 你这20分好艰难啊。

Answer 10

谢谢,加分是必须的,但是有一个问题,
二级菜单LI中只能选择LI,就是A,D
<ul class="menu">
        <li class="write">
            <a href="###">菜单A</a>
            <ul>
                <li><a href="###">A</a></li>
                <li><a href="###">B</a></li>
                <li><a href="###">C</a></li>
            </ul>
        </li>
        <li class="write">
            <a href="###">菜单B</a>
            <ul>
                <li><a href="###">D</a></li>
                <li><a href="###">E</a></li>
                <li><a href="###">F</a></li>
            </ul>
        </li>
</ul>

Answer 11

你怎么都不会自己找错呢。改下z-index
bind函数改一下。 function bind(a,ul) {
        a.onmouseover = function() {
            ul.style.display='block';
　　a.style.zIndex = 10;
        };
        a.onmouseout = function () {
            ul.style.display = 'none';
　　a.style.zIndex = 9;        }
       
    }回答问题也不只是为了分。
分又不能吃。o_o...

Answer 12

解决了,我也在努力DEBUG,可是JS只有一丁点基础,没有那方面的思想啊,只有让自己努力模仿别人的代码
万分感谢~~