ドロップダウンメニューCss余分なスペース

Question

ボタン「ドロップダウン」があり、クリックするとオプション1,2,3のドロップダウンメニューが開きます。すべてのオプションの下に余分なスペースがあり、それはかなり厄介です。 は、私はあなたがそうpadding-bottomがeffect.pleaseていないでしょうpadding:padding-bottom後に宣言しているされているすべてのドロップダウンメニュー項目

var myFunc = function myFunc() { 
 
    document.getElementById("mysociDropdown").classList.toggle('show'); 
 
}

.socidropbtn { 
 
    border-radius: 4px; 
 
    background-color: #008781; 
 
    color: black; 
 
    margin-top: 0px; 
 
    padding-top: 0px; 
 
    padding-bottom: 14px; 
 
    padding-left: 6px; 
 
    padding-right: 6px; 
 
    font-size: 13px; 
 
    border: none; 
 
    cursor: pointer; 
 
    font-family: helvetica, arial, sans-serif; 
 
    font-weight: bold; 
 
    -webkit-transition-duration: 0.3s; 
 
    transition-duration: 0.3s; 
 
} 
 
/* Dropdown button on hover & focus */ 
 

 
.socidropbtn:hover, 
 
.socidropbtn:focus { 
 
    background-color: #006661; 
 
} 
 
/* The container <div> - needed to position the dropdown content */ 
 

 
.socidropdown { 
 
    padding-bottom: 0px; 
 
    position: relative; 
 
    display: inline-block; 
 
    text-align: center; 
 
} 
 
/* Dropdown Content (Hidden by Default) */ 
 

 
.socidropdown-content { 
 
    padding-bottom: 2px; 
 
    display: none; 
 
    position: absolute; 
 
    background-color: #d9d9d9; 
 
    min-width: 130px; 
 
} 
 
/* Links inside the dropdown */ 
 

 
.socidropdown-content a { 
 
    color: black; 
 
    padding-bottom: 0px; 
 
    padding: 1px; 
 
    text-decoration: none; 
 
    display: block; 
 
} 
 
/* Change color of dropdown links on hover */ 
 

 
.socidropdown-content a:hover { 
 
    background-color: #006661 
 
} 
 
/* Show the dropdown menu (use JS to add this class to the .dropdown-content container when the user clicks on the dropdown button) */ 
 

 
.show { 
 
    display: block; 
 
}

<div class="socidropdown"> 
 
    <button onclick="myFunc()" class="socidropbtn">Dropdown</button> 
 
    <div id="mysociDropdown" class="socidropdown-content"> 
 
    <a href="one.php">one</a> 
 
    <a href="two.php">two</a> 
 
    <a href="three.php">three</a> 
 
    </div> 
 
</div>

Answer 1

それが問題のように見えるの最後に余分なスペースを削除したいですこれを試してみてください：

var d = document.getElementById("mysociDropdown"); 
 

 
function myFunc(){ 
 
    d.classList.toggle("show"); 
 
}

.socidropbtn { 
 
    border-radius: 4px; 
 
    background-color: #008781; 
 
    color: black; 
 
    margin-top: 0px; 
 
    padding-top: 0px; 
 
    padding-bottom: 14px; 
 
    padding-left: 6px; 
 
    padding-right: 6px; 
 
    font-size: 13px; 
 
    border: none; 
 
    cursor: pointer; 
 
    font-family: helvetica, arial, sans-serif; 
 
    font-weight: bold; 
 
    -webkit-transition-duration: 0.3s; 
 
    transition-duration: 0.3s; 
 
} 
 
/* Dropdown button on hover & focus */ 
 

 
.socidropbtn:hover, 
 
.socidropbtn:focus { 
 
    background-color: #006661; 
 
} 
 
/* The container <div> - needed to position the dropdown content */ 
 

 
.socidropdown { 
 
    padding-bottom: 0px; 
 
    position: relative; 
 
    display: inline-block; 
 
    text-align: center; 
 
} 
 
/* Dropdown Content (Hidden by Default) */ 
 

 
.socidropdown-content { 
 
    padding-bottom: 2px; 
 
    display: none; 
 
    position: absolute; 
 
    background-color: #d9d9d9; 
 
    min-width: 130px; 
 
} 
 
/* Links inside the dropdown */ 
 

 
.socidropdown-content a { 
 
    color: black; 
 
    /*need to declare padding prior to padding-bottom*/ 
 
    padding: 10px; 
 
    padding-bottom: 0px; 
 
    text-decoration: none; 
 
    display: block; 
 
    
 
    border: 1px solid green; 
 
} 
 
/* Change color of dropdown links on hover */ 
 

 
.socidropdown-content a:hover { 
 
    background-color: #006661 
 
} 
 
/* Show the dropdown menu (use JS to add this class to the .dropdown-content container when the user clicks on the dropdown button) */ 
 

 
.show { 
 
    display: block; 
 
}

<div class="socidropdown"> 
 
    <button onclick="myFunc()" class="socidropbtn">Dropdown</button> 
 
    <div id="mysociDropdown" class="socidropdown-content"> 
 
    <a href="one.php">one</a> 
 
    <a href="two.php">two</a> 
 
    <a href="three.php">three</a> 
 
    </div> 
 
</div>