1

このjavascriptメニューを機能させようとしています。ここで、AAAにカーソルを合わせると、そのサブメニューが表示され、BBBではそのサブメニューが表示されます。

これは、＃subnav1と＃subnav2のcssの可視性を切り替えるjavascriptとして実装されており、2つは互いに重なり合っています。

ただし、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