css - 嵌套的div内容在ie中不可点击

Question

所以我的站点中有一个“meganav”，它本质上是一个区域中的侧边导航，它向左浮动并占据站点的三分之一，然后单击父 anchor 后，它会打开其子 div带有一类“meganav-div”，它向右打开并占据包装区域的其他 2/3，出现在该区域的任何内容之上。

目前，除了 ie6 和 ie7 之外，我在所有浏览器中都可以使用它，您可以在其中打开第一个元素 (div#one) 并单击一切都很好，但是，在此之下的任何内容 (div#two, div#三个等)不起作用，因为这些 div 内的任何链接都不可点击。我在每个 div 中都有一个关闭按钮，适用于所有浏览器，但不适用于 ie6 和 7。光标甚至在所有 anchor 上变为指针，但不会点击。我假设这与 z-index 有关，因为第一个工作，然后不是导航列表中更靠后的那些，但我为所有 .meganav-div 添加了相同的 z-index，但仍然没有快乐。

请在下面找到代码。任何帮助将非常感激。谢谢。请找到 jsfiddle 的链接:http://jsfiddle.net/tomiswoot/vqJnY/1/

       <section id="herocontainer">
            <div class="hero-white">

                <aside>
                    <ul id="mainnav">
                            <a href="#">Nav item 1</a>
                            <!--===MEGANAV one====-----> 
                                <div id="one" class="meganav-div">
                                    MEGANAV DIV CONTENT HERE
                                </div>
                        </li>
                        <li>
                            <a href="#">Nav item 2</a>
                            <!--===MEGANAV two====-----> 
                                <div id="two" class="meganav-div">
                                    MEGANAV DIV CONTENT HERE
                                </div>
                        </li>
                        <li>
                            <a href="#">Nav item 3</a>
                            <!--===MEGANAV three====-----> 
                                <div id="three" class="meganav-div">
                                    MEGANAV DIV CONTENT HERE
                                </div>
                        </li>
                        <li>
                            <a href="#">Nav item 4</a>
                            <!--===MEGANAV four====-----> 
                                <div id="four" class="meganav-div">
                                    MEGANAV DIV CONTENT HERE
                                </div>
                        </li>
                        <li>
                            <a href="#">Nav item 5</a>
                            <!--===MEGANAV five====-----> 
                                <div id="five" class="meganav-div">
                                    MEGANAV DIV CONTENT HERE
                                </div>
                        </li>
                    </ul>
                </aside>

            </div>
        </section>

Answer 1

这是因为您有多个具有相同 id=close1 的关闭按钮 - 这使得您的 html 无效。我将其更改为 class=close1，现在它似乎可以正常工作(我还稍微更改了定位以便于测试)

http://jsfiddle.net/vqJnY/7/