导航栏中的下拉按钮会扭曲导航栏

Question

我正在尝试在导航栏中创建一个下拉按钮。该按钮要么是页面的整个宽度，要么会破坏创建我的导航栏的按钮。很抱歉 css 代码的长度，我认为最好包含所有相关部分，以防除了按钮之外出现问题。

我的css代码：

.website-title-layout {
    
    color:rgb(255, 165, 0);
    background-color:rgb(0, 191, 255);
    text-align: center;
    border-radius: 0px;
    position: fixed;
    top: 0;
    right: 0;
    width: 100%;
    margin-bottom: 100px;
}


.website-title-layout a {
    
    color:rgb(255, 165,0)
    font-family: Merriweather, serif;
    padding: px 5px 5px 5px;
    display: inline-block;
}

.website-title a {
    text-decoration: none;
    font-size: 60px;
    color:rgb(255, 255, 255);
    font-weight: bold;
    posistion: fixed;
}

.website-title a:hover {
    background-color:rgb(255, 165, 0);
}

.page-title a {
    text-decoration: none;
    font-size: 40px;
    color:rgb(255, 255, 255);
}

.page-title a:hover {
    background-color:rgb(255, 165, 0);
}

.main-navigation-bar {
    text-align: center;
    font-family: "Merriweather", serf;
    border-radius: 0px;
    background-color:rgb(0, 191, 255);
    posistion: fixed;   
}

.main-navigation-bar a {
    text-decoration: none;
    color:rgb(255, 255, 255);
    font-size: 25px;
    padding: 10px 10px 10px 10px;
    display: inline-block;
    posistion: fixed;
}

.main-navigation-bar a:hover {
    background-color:rgb(255, 165, 0);
}
/* got the answer for the above from https://stackoverflow.com/questions/676324/div-background-color-to-change-onhover  from user3689455 comment for the a:hover*/

.drop-down-btn {
    background-color:rgb(0, 191, 255);
    color:rgb(255, 255, 255);
    padding: 10px 10px 10px 10px;
    font-size: 25px;
    border: none;
    font-family: "Merriweather", serif;
    
}

.drop-downn-btn a {
    text-decoration: none;
    background-color:rgb(0, 191, 255);
    color:rgb(255, 255, 255);
    padding: 10px 10px 10px 10px;
    font-size: 25px;
}   

.dropdown {
    posistion: relative;
    display: inline-block;
}

.drop-down-content {
    display: none;
    posistion:absolute;
    background-color:rgb(0, 191, 255);
    min-width: 50px;
}

.drop-down-content a {
    font-size: 15px;
    color:rgb(255, 255, 255);
    padding: 10px 10px 10px 10px;
    text-decoration: none;
}

.drop-down-content a:hover {
    background-color:rgb(255, 165, 0);
}

.drop-down:hover .drop-down-content {
    display: block;
}

.drop-down:hover .drop-down-btn {
    background-color:rgb(255, 165, 0)
}

我的 HTML 代码：

<div class="website-title-layout">
    <div class="website-title">
        <a href="homepage.html"> First Meditation </a>
    </div>
    <div class="page-title">
        <a href="contact.html"> Contact </a>
    </div>
    <div class="main-navigation-bar">
        <a href="homepage.html"> Homepage </a>
        <div class="drop-down">
            <a href="the-benefitsandhinderances.html"><button class="drop-down-btn"> The Benefits and Hinderances </a></button>
            <div class="drop-down-content">
                <a href="the-benefits.html"> The benefits </a>
                <a href="the-hinderances.html"> The Hinderances </a>
            </div>
        </div>
        <a href="additionalresources.html"> Additional Resources </a>
        <a href="questionaire.html"> Questionaire </a>
        <a href="contact.html"> Contact </a>
    </div>
</div>

Answer 1

其中一些是我自己的错，在我的 css 文件的下拉列表中遗漏了一个“-”。另外，我必须将我的从属 div 标签设置为绝对，将上面的标签设置为相对。

对于任何有类似问题的人，这就是我解决它的方法。很抱歉任何尝试解决它的人。

.drop-down-btn {
    background-color:rgb(0, 191, 255);
    color:rgb(255, 255, 255);
    padding: 10px 10px 10px 10px;
    font-size: 25px;
    border: none;
    font-family: "Merriweather", serif;
    position: relative;
}

.drop-downn-btn a {
    text-decoration: none;
    background-color:rgb(0, 191, 255);
    color:rgb(255, 255, 255);
    padding: 10px 10px 10px 10px;
    font-size: 25px;
}   

.drop-down {
    position: relative;
    display: inline-block;
}

.drop-down-content {
    display: none;
    position: absolute;
    background-color:rgb(0, 191, 255);
    min-width: 50px;
    left: 0;
    width: 50%;
}

.drop-down-content a {
    font-size: 15px;
    color:rgb(255, 255, 255);
    padding: 10px 10px 10px 10px;
    text-decoration: none;
}

.drop-down-content a:hover {
    background-color:rgb(255, 165, 0);
}

.drop-down:hover .drop-down-content {
    display: block;
}

.drop-down:hover .drop-down-btn {
    background-color:rgb(255, 165, 0)
}