html - 即使隐藏，导航子菜单也会覆盖其下方的链接/内容

Question

好的，所以我最近不得不重做侧边导航，以使其对移动设备更加友好，因为另一个无法正常工作。

因此，我找到了一个我认为我会尝试的方法，但我承认我不太熟悉，虽然我能够调整几乎所有内容，但我仍然有一个大问题。

我有一个侧面导航子菜单，它会弹出其他选项，然后隐藏。然而，即使隐藏，从技术上讲，它仍然存在，掩盖了无法再点击的重要链接。在 IE 中进行测试(我之前只在 Safari 和 Firefox 中查看过，没有注意到它，因为菜单被隐藏了)我可以现在看到一个滚动条清楚地显示正在发生的事情，菜单仍然存在于下面的内容之上，它只是被隐藏了。

我怎样才能让这个菜单只在滚动到它的父级时弹出并覆盖内容，但在不使用时实际上隐藏(或移出屏幕)以便仍然可以点击它下面的链接。您可以在此处查看问题导航(滚动“产品”链接):http://www.pioneerpartygroup.com/license_product/disney.php

如您所见，如果您尝试单击“汽车”、“灰姑娘”、“海底总动员”和左侧链接，它们都无法单击，因为从技术上讲菜单仍然覆盖它们，只是不可见。

这是菜单代码:

<ul class="parent-menu">
<br />

<hr class="hr" width="164" size="2" align="left" color="#FFFFFF">

<li><a href="#">Products&nbsp;&nbsp;&raquo;</a>
<ul>
<li><a href="/accessories.php">Balloon Accessories</a></li>
<li><a href="/funsational.php">Funsational Products</a></li>
<li><a href="/just_write.php">Just Write Products</a></li>
<li><a href="/license_product/license_product.php">Licensed Characters</a></li>
<li><a href="http://www.masterbow.com" target="_blank">MasterBow Products</a></li>
<li><a href="/partymate.php">PartyMate Products</a></li>
<li><a href="/qualatex.php">Qualatex Products</a></li>
<li><a href="/water.php">Water Products</a></li>
</ul>
</li>


<hr class="hr" width="164" size="2" align="left" color="#FFFFFF">
<li><a href="dinodan.php" >Dino Dan</a>

</li>

<hr class="hr" width="164" size="2" align="left" color="#FFFFFF">
<li><a href="disney.php">Disney</a></li>

<hr class="hr" width="164" size="2" align="left" color="#FFFFFF">
<li><a href="dreamworks.php" >Dreamworks</a>

</li>

<hr class="hr" width="164" size="2" align="left" color="#FFFFFF">
<li><a href="el_chavo.php" >El Chavo</a>

</li>

<hr class="hr" width="164" size="2" align="left" color="#FFFFFF">
<li><a href="hellokitty.php" >Hello Kitty</a>

</li>

<hr class="hr" width="164" size="2" align="left" color="#FFFFFF">
<li><a href="hit_entertainment.php" >HiT Entertainment</a>

</li>

<hr class="hr" width="164" size="2" align="left" color="#FFFFFF">

<li><a href="marvel.php">Marvel</a></li>

 <hr class="hr" width="164" size="2" align="left" color="#FFFFFF">
 <li><a href="nascar.php" >Nascar</a>

 </li>

 <hr class="hr" width="164" size="2" align="left" color="#FFFFFF">
 <li><a href="nickelodeon.php" >Nickelodeon</a>

 </li>

 <hr class="hr" width="164" size="2" align="left" color="#FFFFFF">
 <li><a href="pacman.php" >Pacman</a>

 </li>

 <hr class="hr" width="164" size="2" align="left" color="#FFFFFF">
 <li><a href="pocoyo.php" >Pocoyo</a>

 </li>

 <hr class="hr" width="164" size="2" align="left" color="#FFFFFF">
 <li><a href="precious_moments.php" >Precious Moments</a>

 </li>

 <hr class="hr" width="164" size="2" align="left" color="#FFFFFF">
 <li><a href="trashpack.php" >The Trash Pack</a>

 </li>

 <hr class="hr" width="164" size="2" align="left" color="#FFFFFF">
 <li><a href="smurfs.php" >The Smurfs </a>

 </li>

 <hr class="hr" width="164" size="2" align="left" color="#FFFFFF">
 <li><a href="warnerbrothers.php">Warner Brothers</a>

 </li>

 <hr class="hr" width="164" size="2" align="left" color="#FFFFFF">     

 </ul>

 </nav>

这是.css

@charset "UTF-8";
/* CSS Document */
ul, li, nav {

    padding:0;
    margin:0;
}


#menu {
    overflow: auto;
    position:relative;
    z-index:2;
    margin: 0;
    padding: 0;
}


.parent-menu {
    background-color: #ebebeb;
    min-width:165px;
    height:600px;
    float:left;
    font-family: Arial, Helvetica, Verdana, sans-serif;
    font-size: 12px;
    font-weight: bolder;
    font-style: normal;
    margin: 0;
    padding: 0;
}


#menu ul {
    list-style-type:none;
    margin: 0;
    padding: 0;
}


#menu ul li a {
    padding:10px 15px;
    display:block;
    color:#656565;
    text-decoration:none;
}


#menu ul li a:hover {
    left:165px;
    color:#FFF;
    background:#a8a8a8;
    -webkit-transition: all 0.3s ease-in-out;
    -moz-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
    -ms-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;  
}

#menu ul li:hover  ul {
    left: 165px;
    width:165px;
    height:280px;
    color:#FFF;
    background:#000;
    opacity: 0.9;
    filter: alpha(opacity=90); /* For IE8 and earlier */
    -webkit-transition: all 0.3s ease-in-out;
    -moz-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
    -ms-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
}


#menu ul li > ul {
    position: absolute;
    color:#FFF;

    background-color: #000;

    top: 0;

    left: -165px;

    min-width: 165px;

    z-index: -1;

    height: 100%;

    -webkit-transition: left 200ms ease-in;

    -moz-transition: left 200ms ease-in;

    -ms-transition: left 200ms ease-in;

    transition: left 200ms ease-in;
}


#menu ul li > ul li a:hover {
    color:#FFF;
    background-color:#0c8fff;
}

我知道它必须与 left:165px 和 left:-165px 有关，因为基本上当没有悬停时，子菜单应该放在 -165px (在主菜单下面，因此看不到)然后悬停，向右移动 165 像素到观众可见的位置，然后理论上不再悬停时，它会再次移回 -165，但这并没有发生。

感谢任何帮助，我想我只是遗漏了一些简单的东西，也许还有一个 left:-165px 需要添加到某处以使其隐藏直到悬停？

在此先感谢您的帮助。

Answer 1

原因很简单。您的菜单包裹在一个非常深的嵌套表格中，该表格与您的一些链接重叠，子菜单的宽度为 350 像素。

我建议重新考虑您网站的结构:您有一个不需要任何表格结构的简单布局。只需删除表格结构并使用一个简单的网格系统( Bootstrap 或 zurb 可能会有所帮助)，其中 1 列用于导航，11 列用于其余部分。这将解决您的导航问题，并使您的网站响应移动设备。