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

Posted 2023-05-08

【中文标题】导航栏中的下拉按钮会扭曲导航栏

【英文标题】：Drop down button within a navigation bar distorts the navigation bar

【发布时间】：2021-04-08 02:55:57

【问题描述】：

我正在尝试在导航栏中创建一个下拉按钮。该按钮要么是页面的整个宽度，要么会破坏创建我的导航栏的按钮。很抱歉 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://***.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>

【参考方案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)