Question

所以我在HTML / CSS中创建了一个简单的下拉菜单。当我悬停/单击下拉项目时，问题是可见的（在此示例中为“work”）。悬停/单击时显示的项目不会在水平菜单上下拉得足够低或在垂直菜单上下降得太远。我很想知道为什么会这样，以及如何解决它。

注意：我在这里使用Eric Meyer的CSS重置v2.0：http://meyerweb.com/eric/tools/css/reset/ 它对菜单的外观/执行方式有影响，但没有它就可以看到问题。

这是一个jsfiddle： https://jsfiddle.net/qcdtj85w/

我正在使用@media来更改菜单的垂直和水平版本，因此您只需更改显示窗口的大小即可测试两者

谢谢！

以下是代码：

HTML

<!DOCTYPE html>
<html>
<head>
  <title>Home</title>
  <meta name="viewport" content="initial-scale = 1.0,maximum-scale = 1.0" /><!-- Used to make @media work w iphone -->
  <meta charset="UTF-8">
</head>
<body>

    <ul id="menu">      
        <li><a href="#">About</a></li>
        <li>
            <a href="#">Work</a>
            <ul class="noJS">
                <li><a href="#">Drop</a></li>
            </ul>
        </li>
        <li><a href="#">Contact</a></li>    
    </ul>

</body>
</html>

CSS

#menu,
#menu ul {
    background-color: #000;
    list-style: none;
    top:20px;
}
#menu {
    position:fixed;
    float: left;
}
#menu > li {
    position: relative;
    float: left;
}
#menu li a {
    color: #fff;
    display: block;
    height: 2em;
    line-height: 2em;
    padding: 0 1.5em;
    text-decoration: none;
}
#menu ul {
    position: absolute;
    display: none;
    z-index: 999;
}
#menu ul li a {
    width: 50px;
}
#menu li:hover ul.noJS {
    background-color: blue;
    display: block;
}

@media all and (max-width: 860px) { 

    #menu{
        position: fixed;
        top: 20px;
        right: 0px;
    }
    #menu > li {
        float: none;
    }

    #menu > li {
        float: none;
    }

    #menu ul {
        position: relative;
        display: none;
        z-index: 999;
    }

    #menu li:active ul.noJS {
        display: block;
    }

}

Answer 1

遵守这条规则：

#menu li:hover ul.noJS {
    background-color: blue;
    display: block;
}

...添加top: 32px;

总而言之：

#menu li:hover ul.noJS {
    background-color: blue;
    display: block;
    top: 32px;
}

和移动版本（媒体查询部分）：

#menu li:hover ul.noJS {
    top: 0px;
}

导航栏下拉项目未正确定位（html / css）

HTML

CSS

1 个答案: