时间戳

首页 > 解决方案 > 获取多个下拉菜单，而不出现在适当元素下的下拉项目

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

问题描述

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

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

标签： htmlcssdrop-down-menu

解决方案

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

所以在下拉类中添加

position: relative

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

left: 0

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

推荐阅读