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

标签 html css navigation nav

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

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

我有一个侧面导航子菜单,它会弹出其他选项,然后隐藏。 然而,即使隐藏,从技术上讲,它仍然存在,掩盖了无法再点击的重要链接。在 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 需要添加到某处以使其隐藏直到悬停?

在此先感谢您的帮助。

最佳答案

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

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

关于html - 即使隐藏,导航子菜单也会覆盖其下方的链接/内容,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/25813073/

相关文章:

html - IE11 中 div 之间的 1px 间距

jquery - 如何在 ajax 响应的结果中删除 div 中的 css 类

jquery - 使悬停起作用或捕获 iframe 滚动条上的鼠标输入事件?

css - 使用显示 : table 的垂直对齐导航

javascript - 为什么变量没有注册为 true 以使第二个 if 语句起作用?

html - 设置导航菜单事件选项卡 HTML/CSS 样式的问题

html - ul 和 li 菜单上的类是否在 Joomla 上动态更改?

javascript - 具有多个图像模态的页面在第一个模态之后不加载图像

javascript - 固定 html,body 时滚动到元素顶部

html - 无法让 div/section 出现在响应式 img 元素上