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%);
}