Question

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

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

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

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

正如您所看到的，如果您尝试点击“汽车”，“灰姑娘”，“Nemo”和左侧链接，它们都是无法点击的，因为菜单在技术上仍然覆盖它们，只是看不见。

这是菜单代码：

<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;
}

我知道它必须与左边有关：165px和左边：-165px，因为基本上没有盘旋时，子菜单应该放在-165px（在主菜单下面，因此看不到）然后在悬停，移动165px向右移动到观察者可见的位置，然后理论上不再徘徊，它再次向后移动到-165但这似乎没有发生。

任何帮助都表示赞赏，我想我只是遗漏了一些简单的东西，也许是另一个遗留下来的东西：-165px需要被添加到某处以保持隐藏状态直到徘徊？

提前感谢您的帮助。

Answer 1

原因很简单。您的菜单包含在一个非常深的嵌套表中，该表与子菜单的宽度为350px的部分链接重叠。

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

Answer 2

然而，我确实解决了我的问题。

我将溢出设置为：auto所以它基本上是隐藏的。我将其更改为可见，然后调整，以便子菜单实际隐藏在主菜单后面。

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

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

2 个答案: