1
このドロップダウンメニューは恐ろしい動作をしています。ドロップダウンリストは常にボタンより大きく、両方の幅を変更しようとしましたが、画面サイズを変更すると、 。これを並べる方が簡単なはずです。私はここで間違っていますか？ドロップダウンメニューはボタンと同じサイズのままではありません
HTML：
<td>
<div class="dropdown pull-left">
<button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown" aria-expanded="true"><?php echo $text_campaign_dropdown;?><span class="caret"></span></button>
<ul class="dropdown-menu" >
<li class="campaign-dropdown-list"> <a href="<?php echo $order['edit']; ?>" data-toggle="tooltip" class="btn btn-primary" id="campaign-edit" ><?php echo $button_edit; ?></i></a></li>
<li class="campaign-dropdown-list">
<button type="submit" id="campaign-archive" name="archiveButton" value="<?php echo $order['campaign_id']; ?>" onclick="javascript:changeFormAction('<?php echo $archive; ?>');">
<?php echo $button_archive; ?>
</button>
</li>
<li class="campaign-dropdown-list">
<button type="submit" id="campaign-del" name="deleteButton" value="<?php echo $order['campaign_id']; ?>" onclick="javascript:changeFormAction('<?php echo $delete; ?>');">
<?php echo $button_delete; ?>
</button>
</li>
</ul>
</div>
</td>
はCSS：
button.dropdown-toggle{
margin-top: 0;
border-top: 0;
}
ul.dropdown-menu{
margin-top: -1px;
border: 0;
padding: 0;
background: transparent;
}
li.campaign-dropdown-list{
box-shadow: 0 6px 12px rgba(0,0,0,.175);
padding: 3px;
background-image: linear-gradient(to top, rgb(31,123,144) 0.2%,rgb(41,163,194) 100%);
background-blend-mode: color-dodge;
color: #ffffff;
text-align: center;
}
li.campaign-dropdown-list a{
color: white;
background: transparent;
}
li.campaign-dropdown-list a:hover{
color: yellow;
background: transparent; !important
}
li.campaign-dropdown-list:hover{
/* background: #333322 */
background-image: linear-gradient(to top, rgb(31,123,144) 0.2%,lightblue 100%);
}