CSS:下拉菜单位置问题?

时间:2015-05-01 07:51:27

标签: html css drop-down-menu

以下是用于下拉的CSS

.dropdown-menu {

  top: 100%;
  left: 0;
  z-index: 1000;
  display: none;
  float: left;
  min-width: 160px;
  padding: 5px 0;
  margin: 2px 0 0;
  list-style: none;
  font-size: 13px;
  background-color: #ffffff;
  border: 1px solid #cccccc;
  border: 1px solid rgba(0, 0, 0, 0.15);
  border-radius: 0px;
  -webkit-box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
  background-clip: padding-box;
}

现在如果我要添加以下代码

position: relative;

在下拉菜单中,它会增加窗口滚动,但它也会增加表格行高度,看起来很难看,见下面的屏幕截图

Issue When Adding Position

但是当我要删除时

   position: relative;

从下拉菜单css下拉项隐藏见下图

enter image description here

创建下拉列表的代码

<listcell style="text-align:center; overflow: inherit;">
    <div class="btn-group">
        <actionmenu>
            <actionmenugroup title=" " accesskey="a" btncolor="btn-link"
                btnClass="btn btn-outline btn-default dropdown-toggle" iconClass="fa fa-gear">
                <actionmenuitem label="${vm.getText('AccountPaymentDetail:CB_NSF')}"
                    onClick="@command('doNSFPayment',accountPaymntRec = folderFeePaymentListData)"
                    tooltiptext="${vm.getText('AccountPaymentDetail:CB_NSF')}" visible="@load(vm.nsfButton)" iconclass="fa fa-plus" accesskey="a">
                </actionmenuitem>
                <actionmenuitem label="${vm.getText('AccountPaymentDetail:CB_REFUND')}"
                    onClick="@command('refundAccountPayment',accountPaymntRec = folderFeePaymentListData)"
                    tooltiptext="${vm.getText('AccountPaymentDetail:CB_REFUND')}" visible="@load(vm.refundButton)" iconclass="fa fa-refresh">
                </actionmenuitem>
                <actionmenuitem label="${vm.getText('AccountPaymentDetail:CB_VOID')}"
                    onClick="@command('doVoidPayment',voidbill=false,accountPaymntRec = folderFeePaymentListData)"
                    tooltiptext="${vm.getText('AccountPaymentDetail:CB_VOID')}" visible="@load(vm.voidButton)" iconclass="fa fa-times" accesskey="r">
                </actionmenuitem>
                <actionmenuitem label="${vm.getText('AccountPaymentDetail:CB_VOID_PAYMENT_BILL')}" iconclass="fa fa-times"
                    onClick="@command('doVoidPayment',voidbill=true,accountPaymntRec = folderFeePaymentListData)"
                    tooltiptext="${vm.getText('AccountPaymentDetail:CB_VOID_PAYMENT_BILL')}" visible="@load(vm.voidPaymentBillButton)">
                </actionmenuitem>
                <actionmenuitem label="${vm.getText('AccountPaymentDetail:CB_ENDORSE')}"
                    onClick="@command('printEndorsement',accountPaymntRec = folderFeePaymentListData)"
                    tooltiptext="${vm.getText('AccountPaymentDetail:CB_ENDORSE')}" visible="@load(vm.endorseButton)" />
                <actionmenuitem label="${vm.getText('AccountPaymentDetail:CB_TRANS_CARD_REPORT')}"
                    onClick="@command('printPrintTxnCard' ,accountPaymntRec = folderFeePaymentListData)"
                    tooltiptext="${vm.getText('AccountPaymentDetail:CB_TRANS_CARD_REPORT')}" visible="@load(vm.transCardReportButton)" />
                <actionmenuitem label="${vm.getText('AccountPaymentDetail:CB_PAYMENT_LIST_REPORT')}"
                    onClick="@command('printPaymentList' ,accountPaymntRec = folderFeePaymentListData)"
                    tooltiptext="${vm.getText('AccountPaymentDetail:CB_PAYMENT_LIST_REPORT')}" visible="@load(vm.paymentListReportButton)" />
                <actionmenuitem label="${vm.getText('AccountPaymentDetail:CB_APPLY_OVER_PAYMENT')}"
                    onClick="@command('applyOverPayment',accountPaymntRec = folderFeePaymentListData)"
                    tooltiptext="${vm.getText('AccountPaymentDetail:CB_APPLY_OVER_PAYMENT')}" visible="@load(vm.applyOverPaymentButton)" />
                <!-- <actionmenuitem label="@load(vm.getText('AccountPaymentDetail:CB_ADD_CASHIER'))"
                    onClick="@command('accountPaymentButton',cmdButton='cbAddToCashier')"
                    tooltiptext="@load(vm.getText('AccountPaymentDetail:CB_ADD_CASHIER'))" /> -->
            </actionmenugroup>
        </actionmenu>
    </div>
</listcell>

0 个答案:

没有答案