Question

好的，我需要一些帮助。我尝试过这里找到的解决方案，但到目前为止，似乎都没有。一旦鼠标离开父菜单项，有人可以帮我保持sidenav子菜单下拉列表出现，这样我就可以悬停选择链接了。它刚刚消失了吗？

我拥有的.js文件如下：

window.onload = initAll;

function initAll() {
var allLinks = document.getElementsByTagName("a");

for (var i=0; i<allLinks.length; i++) {
    if (allLinks[i].className.indexOf("sidenav_sub_popdown") > -1) {
        allLinks[i].onclick = retFalse;                     
        allLinks[i].onmouseover = toggleMenu;
    }
}
}

function toggleMenu() {
var startMenu = this.href.lastIndexOf("/")+1;
var stopMenu = this.href.lastIndexOf(".");
var thisMenuName = this.href.substring(startMenu,stopMenu);

document.getElementById(thisMenuName).style.display = "block";      

this.parentNode.className = thisMenuName;       
this.parentNode.onmouseout = toggleDivOff;      
this.parentNode.onmouseover = toggleDivOn;      
}

function toggleDivOn() {
document.getElementById(this.className).style.display = "block";
}

function toggleDivOff() {
document.getElementById(this.className).style.display = "none";
}

function retFalse() {
return false;
}

我的html是：

                <div class="sidenav">

                <menu>
                    <ul>
                    <li><a href="about_us_company.php" title="Company Information" ><h2>Company Information </h2></a></li>
                    <li><a href="about_us_vision.php" title="Our Vision" ><h2>Our Vision </h2></a></li>
                    <li><a href="about_us_team.php" title="Our Team" class="sidenav_sub_popdown"><h2>Our Team </h2></a></li>
                        <ul id="about_us_team">
                        <li><a href="about_us_steve.php" title="Steve Malcolm" ><h4>&#187 Steve Malcolm </h4></a></li>
                        <li><a href="about_us_anita.php" title="Anita Malcolm" ><h4>&#187 Anita Malcolm </h4></a></li>
                        <li><a href="about_us_dave.php" title="David Stanley" ><h4>&#187 David Stanley </h4></a></li>
                        <li><a href="about_us_ian.php" title="Ian Wallace" ><h4>&#187 Ian Wallace </h4></a></li>
                        <li><a href="about_us_terence.php" title="Terence Price" ><h4>&#187 Terence Price </h4></a></li>
                        <li><a href="about_us_michael.php" title="Michael Malcolm" ><h4>&#187 Michael Malcolm </h4></a></li>
                        <li><a href="about_us_kristy.php" title="Kristy Beer" ><h4>&#187 Kristy Beer </h4></a></li>
                        <li><a href="about_us_natalie.php" title="Natalie Kay" ><h4>&#187 Natalie Kay </h4></a></li>
                        <li><a href="about_us_sarah.php" title="Sarah Reed" ><h4>&#187 Sarah Reed </h4></a></li><br /> 
                        </ul>
                    <li><a href="about_us_qualifications.php" title="Qualifications" ><h2>Qualifications </h2></a></li>
                    <li><a href="about_us_partners.php" title="Industry Partners" ><h2>Industry Partners </h2></a></li>
                    </ul>
                </menu>

相信这是足够的信息。谢谢：）劳拉

Answer 1

首先，您应该使用<nav>元素而不是<menu>。 <menu>将用于命令列表，并且是一个交互式元素，更可能仅在Web应用程序中使用。

其次，您的子菜单应该在<li>元素内，如下所示：

<li><a href="..."><h2>Our Team</h2></a>
  <ul id="about_us_team">
    <li><a href="..." ><h4>Steve Malcolm</h4></a></li>
    <li><a href="..."><h4>Anita Malcolm</h4></a></li>
  </ul>
</li>

最后，如果我从核心理解你的问题，而不是使用JavaScript，你应该寻找CSS。

所以删除你的JavaScript并把它放在你的CSS文件中它应该有效：

.sidenav ul ul {
   display:none;
}
.sidenav ul li:hover ul {
   display:block;
}

切换菜单消失

1 个答案: