드롭 다운 버튼이 다른 버튼과 같은 서식을 따르지 않게 만드는 코드에서 어떤 현상이 발생합니까?

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

. 아래에서 너비를 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; 
    }