html - 获取多个下拉菜单，而不会在适当的元素下出现下拉项

Question

我试图在导航元素中创建多个下拉菜单。除了当用户将鼠标悬停在菜单项上时显示的元素之外，一切都按预期工作，菜单项显示在第一个元素下方，而不是选择的任何元素。

这是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