ドロップダウンボタンを他のボタンと同じ書式に従わないコードではどうなりますか？

Question

ドロップダウンボタンを他のボタンと同じフォーマットにしないコードではどうなりますか？私は自分のドロップダウンボタンを作ろうとしましたが、私の試みは失敗しました。私がドロップダウンをコピーしようとしても、それは意図したとおりには動作しません。私のコードはおそらく恐ろしく間違っているが、助けに感謝します。

CSS：

.navbut 
{ 
    background-color: grey; 
    width: 15%; 
    height: 50px; 
    margin-left: 3%; 
    margin-right: 1%; 
    margin-bottom: 0px; 
    margin-top: 0px; 
    padding: 0; 
    border: none; 
    background: none; 
    font-weight: bold; 
    color: white; 
} 

.navbut:hover 
{ 
    background-color: black; 
} 


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

.dropdown .dropdown-menu { 
    position: absolute; 
    top: 100%; 
    display: none; 
    margin: 0; 

    /**************** 
    ** NEW STYLES ** 
    ****************/ 

    list-style: none; /** Remove list bullets */ 
    width: 100%; /** Set the width to 100% of it's parent */ 
    padding: 0; 
} 

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

    /** Button Styles **/ 
    .dropdown button { 
     background-color: grey; 
     width: 15%; 
     height: 50px; 
     margin-left: 3%; 
     margin-right: 1%; 
     margin-bottom: 0px; 
     margin-top: 0px; 
     padding: 0; 
    border: none; 
    background: none; 
    font-weight: bold; 
    color: white; 
} 

/** List Item Styles **/ 
.dropdown a { 
    display: block; 
    text-decoration: none; 
    background: grey; 
    color: white; 
} 

/** List Item Hover Styles **/ 
.dropdown a:hover { 
    background: black; 
} 

HTML：

<div class="nav"> 

<button class="navbut">Home</button> 
<button class="navbut">Prize draws</button> 
<button class="navbut">Filler</button> 
<button class="navbut">Filler</button> 

<div class="dropdown"> 

    <!-- trigger button --> 
    <button class="navbut">Navigate</button> 

    <!-- dropdown menu --> 
    <ul class="dropdown-menu"> 
     <li><a href="#home">Home</a></li> 
     <li><a href="#about">About</a></li> 
     <li><a href="#contact">Contact</a></li> 
    </ul> 
</div> 

Answer 1

あなたが他の人がいなかったとして、それはのdivコンテナにあったので、ボタンに幅を追加する必要がありました。私の下では、幅を15％ではなく100％に変更し、他のボタンサイズに応じて左右にパディングを追加しました。それが役に立てば幸い。

/** Button Styles **/ 
    .dropdown button { 
    background-color: gray; 
    width: 100%; 
    height: 50px; 
    margin-left: 3%; 
    margin-right: 1%; 
    margin-bottom: 0px; 
    margin-top: 0px; 
    padding-left:60px; 
    padding-right:60px; 
    border: none; 
    background: none; 
    font-weight: bold; 
    color: white; 
    }