1

我试图让这个 javascript 菜单在哪里工作，当我将鼠标悬停在 AAA 上时，它的子菜单显示，而在 BBB 上，它的子菜单显示。

它被实现为一个javascript，它切换#subnav1 和#subnav2 css 可见性，其中两者相互重叠。

但是，似乎只有 BBB 鼠标悬停才能正常工作，我怀疑是因为 subnav2 位于 subnav1 之上，但是即使弄乱 z-index 也不能解决问题。知道吗？

在此处输入图像描述

下面是代码..我留下了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>
4

0 回答 0