html - 如何修复导航栏和下拉内容，使其对齐而不重叠？

问题描述

如何修复导航栏，以使下拉菜单不会越过其父级并且与其一致？另外，当您将鼠标悬停在“关于”选项卡上时，如何填充它？正如你所看到的，它只填充了其中的一部分，直到导航栏的末尾。

有我的小提琴：https ://jsfiddle.net/Shade1337/29sd0g07/

.navigation {
    overflow: hidden;
    height: 60px;
    border: 3px solid #E3E3E3;
    background-color: #1f1d1d;
    font-family: Arial, Helvetica, sans-serif;
    width: 1078px;
}

.navigation a {
    float: left;
    font-size: 30px;
    color: antiquewhite;
    text-align: center;
    padding: 18px 20px;
    text-decoration: none;
    width: 234px;
    height: 25px;
}

.dropdown {
    float: left;
    overflow: hidden;
}

    .dropdown .dropbtn {
        border-style: none;
        border-color: inherit;
        font-size: 30px;
        margin: 0;
        outline: none;
        color: antiquewhite;
        padding: 18px 20px;
        background-color: inherit;
        font-family: inherit;
        width: 214px;
        height: 25px;
    }

.navigation a:hover, .dropdown:hover .dropbtn {
        background-color: #4e3f3f;
    }

.dropdown-content {
    overflow: hidden;
    display: none;
    position: absolute;
    background-color: #1f1d1d;
    min-width: 214px;
    box-shadow: 0px 8px 16px 0px rgb(186,179,179);
    z-index: 1;
}

.dropdown-content a {
    float: none;
    color: antiquewhite;
    padding: 18px 20px;
    text-decoration: none;
    display: block;
    text-align: center;
}

.dropdown-content a:hover {
    background-color: #4e3f3f;

}

.dropdown:hover .dropdown-content {
    display: block;
}

 <div class="navigation">
                <a href="#home">Home</a>
                <div class="dropdown">
                    <button class="dropbtn">Types
                        <i class="fa fa-caret-down"></i>
                    </button>
                    <div class="dropdown-content">
                        <a href="#">Regular</a>
                        <a href="#">Cafe latte</a>
                        <a href="#">Espresso</a>
                        <a href="#">Cappuccino</a>
                    </div>
                </div>
                <a href="#shop">Shop</a>
                <a href="#about">About</a>

            </div>

标签： htmlcss

html - 如何修复导航栏和下拉内容，使其对齐而不重叠？

问题描述

解决方案

推荐阅读