隐藏在导航后面的下拉内容

Question

我正在为一个项目设计主页，下拉菜单内容位于下方导航菜单 (primary-nav) 的后面，并且隐藏在右侧的屏幕外。我使用 margin-right 标签进行了此操作，但不知何故我从那时到现在打破了代码。

此外，我的页面的基本结构是使用 flexbox 设计的，所以我不确定这是否有帮助。我使用 flexbox 将页脚贴在底部而不是覆盖内容。

这是我的 style.css 的摘录：

/* || Dropdown Menus || */

.dropdown {
    overflow: hidden;
    text-align: center;
    padding-right: 8px;
    float: left;
}

.dropdown .dropbtn {
    background-color: transparent;
    border: none;
    outline: none;
    color: white;
    font-family: inherit;
    /* Important for vertical align on mobile phones */
    margin: 0;
    /* Important for vertical align on mobile phones */
    cursor: pointer;
}

.dropdown-content {
    display: none;
    position: absolute;
    background-color: #3f69a8;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
    white-space: nowrap;
    z-index: 10000;
}

.dropdown .dropdown-content a,
.dropdown .dropdown-content h3 {
    color: white;
    padding: 5px;
    display: block;
    text-align: left;
    font-size: 16px;
    white-space: nowrap;
    float: none;
}

.dropdown:hover .dropdown-content {
    /* Show dropdown menu on hover */
    display: block;
}

.dropdown-content a:hover {
    background-color: darkgray;
}


/* Top Navigation */

.navbar {
    overflow: hidden;
    background: #3f69a8;
    width: 100%;
    height: 70px;
    display: inline;
    font-weight: bold;
    font-size: 25px;
    margin: 0;
    padding: 15px;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 5;
}

.logobtn {
    background-color: transparent;
    border: none;
}

.navbar a {
    font-size: 30px;
    color: white;
    text-align: center;
    text-decoration: none;
}


/* || PRIMARY MENU || */

.primary-nav {
    align-items: center;
    height: 50px;
    left: 0px;
    padding: 15px;
    width: 100%;
    margin: 0px;
    background-color: darkgray;
    display: block;
    position: fixed;
    top: 70px;
    z-index: 3;
}

.primary-nav a {
    color: white;
    font-size: 16px;
}

这是我的 home.php:

<nav class="navbar">
            <button class="logobtn">
                <a href="home.php" title="Home"><i class="fas fa-shapes"></i> <span style="font-weight:bold; font-size:40px">S</span>hape <span style="font-weight:bold; font-size:40px">S</span>earch</a>
            </button>

            <div class="dropdown" style="float:right; width: 10%;">
                <button class="dropbtn">
                    <i class="fas fa-cog fa-2x" title="Settings"></i>
                </button>
                <div class="dropdown-content">
                    <button class="dark-mode-btn" onclick="toggleDark()"><i class="fas fa-adjust"></i> Dark Mode
                    </button>
                    
                    <a href="#"><i class="fa-regular fa-earth-americas"></i>Language</a>
                </div>
            </div>

            <div class="dropdown" style="float:right; width:10%;">
                <button class="dropbtn">
                <i class="fas fa-user-circle fa-2x" title="Account"></i>
                </button>
                <div class="dropdown-content">
                    <h3>Welcome $username!</h3>
                    
                    <a href="editProfile.php"><i class="fas fa-user-edit"></i> My Profile</a>

                    <a href="manageUploads.php"><i class="fas fa-upload"></i> Manage Uploads</a>

                    <a href="history.php"><i class="far fa-clock"></i> History</a>

                    <a href="logout.php"><i class="fas fa-sign-out-alt"></i> Logout</a>
                </div>
            </div>

            <div class="dropdown" style="float:right; width:10%">
                <button class="dropbtn">
                    <i class="fas fa-bell fa-2x" title="Notifications"></i>
                </button>

                <div class="dropdown-content">
                    <a href="#">Notifications Center</a>
                    <a href="#">Clear Notifications</a>
                </div>
            </div>
        </nav>

Answer 1

编辑

/* Top Navigation */

.navbar {
    /* overflow: hidden; Remove this line */
    background: #3f69a8;
    width: 100%;
    height: 70px;
    display: inline;
    font-weight: bold;
    font-size: 25px;
    margin: 0;
    padding: 15px;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 5;
}

隐藏在导航后面的下拉内容

Dropdown Content Hidden Behind Navigation

php

html

css

dropdown