Question

我正在努力使这个javascript菜单工作，当我将鼠标悬停在AAA子菜单上时，在BBB上显示其子菜单。

它实现为一个javascript，可以切换＃subnav1和＃subnav2 css的可见性，两者相互重叠。

然而，似乎只有BBB鼠标悬停才能正常工作，我怀疑因为subnav2位于subnav1之上，但即使搞乱z-index也无法解决怪癖问题。有什么想法吗？

enter image description here

下面是代码..我离开了css样式，使它看起来像一个菜单，希望它对sscce来说不会太长

<html>
    <head>
    <style>
    #nav {
    float:left;
    height:20px;
    width:50%;
    font-size:.8em;
    margin:10px 0 0 20%;
    }

    #nav li,#subnav1 li,#subnav2 li {
    display:inline;
    }

    #nav ul li a,#subnav1 ul li a,#subnav2 ul li a {
    color:#000;
    text-decoration:none;
    margin:0 10px 0 0;
    }

    #nav ul,#subnav1 ul,#subnav2 ul {
    list-style-type:none;
    margin:0;
    padding:0;
    }

    #subnav1,#subnav2 {
    width:100%;
    height:100%;
    position:absolute;
    top:0;
    left:0;
    }

    #subnavs {
    background:none repeat scroll 0 0 #ccc;
    position:relative;
    float:left;
    height:20px;
    width:60%;
    font-size:.8em;
    margin:0 0 0 20%;
    padding:3px 0 0 10px;
    }
    </style>
    </head>
    <body>
     <div id="nav">
<ul>
<li><a href="index.php">Home</a></li>
<li onmouseover="showAAA(true, 'subnav1')" onmouseout="showAAA(false, 'subnav1')"><a>AAA</a></li>
<li onmouseover="showAAA(true, 'subnav2')" onmouseout="showAAA(false, 'subnav2')"><a>BBBB</a></li>
</ul>
</div>
<div id="subnavs">
<div id="subnav1" onmouseover="showAAA(true, 'subnav1')" onmouseout="showAAA(false, 'subnav1')">
<ul style="display: none; z-index: 10;">
<li><a>AAAAAAAA1</a></li>
<li><a>AAAAAAAA2</a></li>
<li><a>AAAAAAAA3</a></li>
<li><a>AAAAAAAA4</a></li>
</ul>
</div>
<div id="subnav2" onmouseover="showAAA(true, 'subnav2')" onmouseout="showAAA(false, 'subnav2')">
<ul style="display: none; z-index: -10;">
<li><a>BBBBBBBB1</a></li>
<li><a>BBBBBBBB2</a></li>
<li><a>BBBBBBBB3</a></li>
<li><a>BBBBBBBB4</a></li>
</ul>
</div>
</div>
    </body>
    <script type="text/javascript">
            function showAAA(show, subnavid) 
            {
            var subNav1 = document.getElementById(subnavid);
            var ull = subNav1.getElementsByTagName("ul");
            for (var i = 0, ii = ull.length; i < ii; i++) 
            {
                if(show) 
                {
                  ull[i].style.display = "block";
                  ull[i].style.zIndex = 10;
                }
                else 
                {
                  ull[i].style.display = "none";
                  ull[i].style.zIndex = -10;
                }
            }
            };
</script>
</html>

Javascript mouseover mouseout菜单

0 个答案: