Question

我正在尝试在nav元素中创建多个下拉菜单。当用户将鼠标悬停在菜单项上时显示的元素显示在第一个元素下方而不是选择的任何元素之外，事物按预期工作。

这是codepen中的代码

https://codepen.io/robinreborn/pen/BxRKEa

HTML

<nav class="header-nav">
    <div class="dropdown">
        <a href="/about-the-company.php">About the Company</a>
        <div class="dropdown-content">
            <a href="/our-team.php">Management Team</a>
        </div>
    </div>
    <div class="dropdown">
        <a href="/the-science.php">The Science</a>
        <div class="dropdown-content">
            <a href="/what-it-tests.php">What is tests?</a>
            <a href="/select-research.php">Select Research?</a>
        </div>
    </div>
    <div class="dropdown">      
        <a href="/products.php">Products</a>
        <div class="dropdown-content">
            <a href="/our-assessments">Our Assessments</a>
            <a href="/holland-interest-profiler">Holland Interest Profiler</a>
            <a href="/decision-making-instrument">Decision Making Instrument</a>
            <a href="/perspective-taking-instrument">Perspective Taking Instrument</a>
            <a href="/admin-review">Admin Review</a>
        </div>
    </div>
    <a href="/blog.php">Blog</a>
    <a href="/contact.php">Contact Us</a>
    <a href="/login.php">Login</a>
</nav>

CSS

.dropdown {
display:inline; 
}
.dropdown:hover .dropdown-content {
    display: block;
}`
.dropdown-content {
    display: none;
    position: absolute;
    background-color: #f9f9f9;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 1;
    padding-top: 1em;
}

.dropdown-content a {
    float: none;
    color: black;
    padding: 12px 16px;
    display: block;
    text-align: left;
    position: relative;
    clear: both;
}

Answer 1

您只需在父元素上设置定位即可。

所以在下拉类中添加

position: relative

并在绝对图层上设置左侧位置：

left: 0

笔在这里：https://codepen.io/cidicles/pen/YLVGjQ

获取多个下拉菜单，而不会在适当的元素

1 个答案: