Question

我对javascript很新，所以如果我浪费任何时间处理可能有问题的问题，我会提前道歉。回答： - ）

我正在为网页创建导航栏。它从一个无序列表开始，我将它设置为样式，使列表项在页面上水平浮动。那部分对我来说很好。

我开始将无序列表合并为原始列表项的子菜单。当我将鼠标悬停在主列表项上时，会出现子菜单项，当我鼠标移出时，子菜单项会消失。问题是，当子菜单项出现时，它们显示在左侧导航链接的顶部，而不是在我悬停的链接下方突破和下降。我尝试将位置设置为相对位置，但随后它将子菜单推到右侧。

我认为问题可能出在我的CSS上。如果我不应用外部样式表，那么事情似乎更好。

这是我的HTML：

<ul class="nav">
    <li><a href="Home.html">Home</a></li>
    <li><a href="DepartmentMembers.html" onMouseover="drop('menu')" onMouseout="hide('menu')">Department Members</a></li>
        <ul id="menu" style="display:none;position:absolute">
            <li><a href="BrianKendricks.html">Brian Kendricks</a></li>
            <li><a href="TimJones.html">Tim Jones</a></li>
            <li><a href="DavidKline.html">David Kline</a></li>
        </ul>
    <li><a href="SystemsUsed.html">Systems Used</a></li>
    <li><a href="SystemStatus.html">System Status</a></li>
    <li><a href="Projects.html">Projects</a></li>

</ul>

我的css是：

.nav li {
    float: left;
    width: 20%;
    font-family: verdana,arial,sans-serif;
    text-align: center;
    padding-top: 5px;
    padding-bottom: 5px;
    background-image:none;
    background-color: #004E98;
    display: block;
}

.nav a {
    color: white;
}

.nav a:hover {
    color: white;
}

.nav li:a:hover {
    background-color: #093F6D;
}

这是我的javascript：

function drop(menu) {
    document.getElementById(menu).style.display = 'block';
    document.getElementById(menu).style.position = 'relative';
}

function hide(menu) {
    document.getElementById(menu).style.display = 'none';
}

我想坚持使用javascript，因为我正在采取的课程不希望我在这个时候加入像JQuery这样的东西。

提前感谢您提供的任何帮助，指出我正确的方向。

Answer 1

让您的子菜单成为他们所在的<li>的孩子 - 而不是目前您拥有整体<ul>的孩子。然后你可以给父项相对定位，子列表绝对定位最高100％（把它放在父项下）。

function drop(menu) {
    document.getElementById(menu).style.display = 'block';
}

function hide(menu) {
    document.getElementById(menu).style.display = 'none';
}

.nav li {
    float: left;
    width: 20%;
    font-family: verdana,arial,sans-serif;
    text-align: center;
    padding-top: 5px;
    padding-bottom: 5px;
    background-image:none;
    background-color: #004E98;
    display: block;
    position: relative;
}

.nav a {
    color: white;
}

.nav a:hover {
    color: white;
}

.nav li:a:hover {
    background-color: #093F6D;
}

.dropmenu {
  position: absolute;
  top:100%;
  left: 0;
}

.dropmenu li {
  display: block;
  float: left;
  width:100%;
}

<ul class="nav">
    <li><a href="Home.html">Home</a></li>
    <li><a href="DepartmentMembers.html" onMouseover="drop('menu')" onMouseout="hide('menu')">Department Members</a>
        <ul id="menu" class="dropmenu" style="display:none">
            <li><a href="BrianKendricks.html">Brian Kendricks</a></li>
            <li><a href="TimJones.html">Tim Jones</a></li>
            <li><a href="DavidKline.html">David Kline</a></li>
        </ul>
    </li>  
    <li><a href="SystemsUsed.html">Systems Used</a></li>
    <li><a href="SystemStatus.html">System Status</a></li>
    <li><a href="Projects.html">Projects</a></li>

</ul>

导航栏中的隐藏子菜单显示在悬停但未下降

1 个答案: