Question

根据我的浏览器宽度调整水平导航头子菜单宽度非常困难。我遇到的问题是：

如果顶级链接偏离右侧，有时下拉菜单（位于右侧）会离开屏幕。
如果屏幕分辨率发生变化，部分菜单会换行。

我已经搜索了一些解决方案（我已尝试过此链接：external storage），但我无法找到解决方案。

这是我的代码：

HTML：

<div id="cssmenu">
    <ul class="list">
    <li name="item"><a href="Blank.aspx" target="frmScr"><i class="fa fa-fw fa-home"></i>Home</a></li><li name="item">
                                             <a href="QuickOrderEntry.aspx" target="frmScr">Quick Order</a></li><li name="item">
                                             <a href="OpenMF.aspx" target="frmScr">Open MFs</a></li><li name="item">
                                             <a href="SpreadOrder.aspx" target="frmScr">Spread Order</a></li><li name="item">
                                             <a href="SwitchOpenMF.aspx" target="frmScr">Switch Order</a></li><li name="item">
                                             <a href="SpreadViewOrders.aspx" target="frmScr">View Spread Orders</a></li><li name="item">
                                             <a href="ViewOrder.aspx" target="frmScr">View Order</a></li><li name="item" class="has-sub"><span class="submenu-button"></span>
                                             <a href="Blank.aspx" rel="SSI0000001" target="frmScr">Systematic Investment</a><ul id="SSI0000001"><li class="has-sub"><span class="submenu-button"></span><a href="Blank.aspx" target="frmScr">SIP</a><ul><li><a h

ref="frmSIPRegistration.aspx" target="frmScr">SIP Registration</a></li><li><a href="frmrptCancelSIP.aspx" target="frmScr">SIP Cancellation</a></li><li><a href="frmrptSIPRegistrationView.aspx" target="frmScr">SIP Registration Report</a></li><li><a href="frmrptBrokerSIPReport.aspx" target="frmScr">SIP Installment due Report</a></li><li><a href="frmSIPCancellationReport.aspx" target="frmScr">SIP Cancellation Report</a></li><li><a href="BulkFileUpload.aspx?TransType=IMP_SIP&amp;FileType=IMP_SIP_REG" target="frmScr">SIP Registration Upload</a></li><li><a href="BulkFileUpload.aspx?TransType=IMP_SIP&amp;FileType=IMP_SIP_CAN" target="frmScr">SIP Cancellation Upload</a></li><li><a href="BulkFileUpload.aspx?TransType=IMP_SHIFT&amp;FileType=IMP_SIP_TO_XSP" target="frmScr">Shift SIP To XSIP Upload</a></li><li><a href="SIPExceptionsReport.aspx" target="frmScr">SIP Exception Report</a></li></ul></li><li class="has-sub"><span class="submenu-button"></span><a href="Blank.aspx" target="frmScr">Mandate</a><ul><li><a href="frmMandateRegistrationForm.aspx" target="frmScr">Mandate Registration</a></li><li><a href="frmMandateUploadByMember.aspx" target="frmScr">Mandate Registration Upload</a></li><li><a href="frmMandateSearchByMember.aspx" target="frmScr">Mandate Search</a></li><li><a href="frmMandateDownloadForMember.aspx" target="frmScr">Mandate Download</a></li></ul></li><li class="has-sub"><span class="submenu-button"></span><a href="Blank.aspx" target="frmScr">X-SIP / I-SIP</a><ul><li><a href="frmXSIPRegistrationMaster.aspx" target="frmScr">X-SIP / I-SIP Registration</a></li><li><a href="BulkFileUpload.aspx?TransType=IMP_XSIP&amp;FileType=IMP_XSIP_REG" target="frmScr">X-SIP / I-SIP Registration Upload</a></li><li><a href="frmRptXSIPRegistrationView.aspx" target="frmScr">X-SIP / I-SIP Registration Report</a></li><li><a href="frmRptXSIPInstallmentDueReport.aspx" target="frmScr">X-SIP / I-SIP Installment due Report</a></li><li><a href="frmrptXSIPBrokerageReportForMembers.aspx" target="frmScr">Brokerage Report</a></li><li><a href="frmrptCancelXSIP.aspx" target="frmScr">X-SIP / I-SIP Cancellation</a></li><li><a href="BulkFileUpload.aspx?TransType=IMP_XSIP&amp;FileType=IMP_XSIP_CAN" target="frmScr">X-SIP / I-SIP Cancellation Upload</a></li><li><a href="frmXSIPCancellationReport.aspx" target="frmScr">X-SIP / I-SIP Cancellation Report</a></li></ul></li><li class="has-sub"><span class="submenu-button"></span><a href="Blank.aspx" target="frmScr">SWP</a><ul><li><a href="SWPRegistrationMaster.aspx" target="frmScr">SWP Registration Master</a></li><li><a href="BulkFileUpload.aspx?TransType=IMP_SWP&amp;FileType=IMP_SWP_REG" target="frmScr">SWP Registration Upload</a></li><li><a href="BulkFileUpload.aspx?TransType=IMP_SWP&amp;FileType=IMP_SWP_CAN" target="frmScr">SWP Cancellation Upload</a></li><li><a href="SWPCancellationRegn.aspx" target="frmScr">SWP Cancellation</a></li></ul></li><li class="has-sub"><span class="submenu-button"></span><a href="Blank.aspx" target="frmScr">STP</a><ul><li><a href="STPRegistrationMaster.aspx" target="frmScr">STP Registration Master</a></li><li><a href="BulkFileUpload.aspx?TransType=IMP_STP&amp;FileType=IMP_STP_REG" target="frmScr">STP Registration Upload</a></li><li><a href="BulkFileUpload.aspx?TransType=IMP_STP&amp;FileType=IMP_STP_CAN" target="frmScr">STP Cancellation Upload</a></li><li><a href="STPCancellationRegn.aspx" target="frmScr">STP Cancellation</a></li></ul></li></ul></li><li name="item" class="has-sub"><span class="submenu-button"></span>
                                                 <a href="Blank.aspx" rel="SGB0000001" target="frmScr">SGB</a><ul id="SGB0000001"><li><a href="SGBManualEntry.aspx" target="frmScr">SGB Manual Entry</a></li><li><a href="SGBView.aspx" target="frmScr">SGB View</a></li><li><a href="SGBUpload.aspx" target="frmScr">SGB Upload</a></li></ul></li><li name="item" class="has-sub"><span class="submenu-button"></span>
                                                 <a href="Blank.aspx" rel="MADM000001" target="frmScr">Admin</a><ul id="MADM000001"><li class="has-sub"><span class="submenu-button"></span><a href="Blank.aspx" target="frmScr">Member Masters</a><ul><li><a href="MemberBranches.aspx" target="frmScr">Member Branches</a></li></ul></li><li class="has-sub"><span class="submenu-button"></span><a href="Blank.aspx" target="frmScr">User Master</a><ul><li><a href="UserMasterDetails.aspx" target="frmScr">User Master Manual</a></li><li><a href="UserMasterUpload.aspx" target="frmScr">User Master Upload</a></li></ul></li><li class="has-sub"><span class="submenu-button"></span><a href="Blank.aspx" target="frmScr">Client Details</a><ul><li><a href="ClientMasterDetails.aspx" target="frmScr">Client Master</a></li><li><a href="FATCA.aspx" target="frmScr">FATCA Manual Entry</a></li><li><a href="CKYC.aspx" target="frmScr">CKYC</a></li></ul></li><li class="has-sub"><span class="submenu-button"></span><a href="Blank.aspx" target="frmScr">Admin Reports</a><ul><li><a href="frmrptBrokerSIPReport.aspx" target="frmScr">SIP Installment due Report</a></li><li><a href="UserMasterReport.aspx" target="frmScr">User Master Report</a></li><li><a href="ClientMasterReport.aspx" target="frmScr">Client Master Report</a></li><li><a href="frmClientStatusReport.aspx" target="frmScr">Client Status</a></li><li><a href="RptBranchLoginInfo.aspx" target="frmScr">Branch/Login Info</a></li><li><a href="RptMemberAMCList.aspx" target="frmScr">Member AMC List</a></li><li><a href="frmViewBannedClients.aspx" target="frmScr">View Banned Clients</a></li></ul></li><li class="has-sub"><span class="submenu-button"></span><a href="Blank.aspx" target="frmScr">Limits</a><ul><li><a href="BranchDeposits.aspx" target="frmScr">Branch Deposits</a></li><li><a href="DealerDeposits.aspx" target="frmScr">Dealer Deposits</a></li><li><a href="ClientDeposits.aspx" target="frmScr">Client Deposits</a></li></ul></li><li><a href="ClientPaymentRejections.aspx" target="frmScr">Payment Rejections</a></li><li><a href="UploadFATCAFile.aspx" target="frmScr">FATCA Upload</a></li><li><a href="AOFDownload.aspx" target="frmScr">AOF Download</a></li><li><a href="ImageUpload.aspx" target="frmScr">Image Upload</a></li><li><a href="MemberBankDetails.aspx" target="frmScr">Member Bank Details</a></li><li><a href="PANUpload.aspx" target="frmScr">PAN Upload</a></li></ul></li><li name="item" class="has-sub"><span class="submenu-button"></span>
                                                 <a href="Blank.aspx" rel="MMR0000001" target="frmScr">Member Reports</a><ul id="MMR0000001"><li><a href="ProvORDReport.aspx" target="frmScr">Provisional Orders</a></li><li><a href="RptProvisionalOrderReportNew.aspx" target="frmScr">New Provisional Orders</a></li><li><a href="OCNReport.aspx" target="frmScr">Bulk OCN Generation</a></li><li><a href="CustodianProvOrderReport.aspx" target="frmScr">Custodian Provision Orders</a></li><li><a href="OrderLogReport.aspx" target="frmScr">Order Log</a></li><li><a href="OrderDetailsSearch.aspx" target="frmScr">Order Status</a></li><li><a href="RptOrderStatusReportNew.aspx" target="frmScr">New Order Status</a></li></ul></li><li name="item" class="has-sub"><span class="submenu-button"></span>
                                                 <a href="Blank.aspx" rel="MDD0000001" target="frmScr">Daily Downloads</a><ul id="MDD0000001"><li><a href="javascript:openUpBSESite();">StAR MF Notices</a></li><li class="has-sub"><span class="submenu-button"></span><a href="Blank.aspx" target="frmScr">File Structures</a><ul><li><a href="javascript:openUpFileStructure('WEB');" target="frmScr">Web File Structure</a></li><li><a href="javascript:openUpFileStructure('IML');" target="frmScr">IML File Structure</a></li><li><a href="javascript:openUpFileStructure('API');" target="frmScr">API File Structure</a></li></ul></li><li><a href="javascript:openUpMandateForm();">Mandate Registration Form</a></li><li class="has-sub"><span class="submenu-button"></span><a href="Blank.aspx" target="frmScr">Masters</a><ul><li><a href="RPTSETTLEMENTMASTER.aspx" target="frmScr">Settlement Calendar</a></li><li><a href="RPTNAVMASTER.aspx" target="frmScr">NAV Download</a></li><li><a href="RptSchemeWiseNAV.aspx" target="frmScr">Schemewise NAV</a></li><li><a href="RPTSCHEMEMASTER.aspx" target="frmScr">Scheme Code Master</a></li><li><a href="DownloadSipSchemeMaster.aspx?RptType=NEW" target="frmScr">SIP Schemes Download New</a></li></ul></li><li class="has-sub"><span class="submenu-button"></span><a href="Blank.aspx" target="frmScr">Transactions</a><ul><li><a href="RptProvisionalOrders.aspx" target="frmScr">Provisional Order</a></li><li><a href="ClientFundObligation.aspx" target="frmScr">Client Fund Obligation</a></li><li class="has-sub"><span class="submenu-button"></span><a href="ClientFundObligationPayout.aspx" target="frmScr">Client Fund Obligation (Same Day)</a><ul><li><a href="ClientFundObligationSameDay.aspx" target="frmScr">Payin(Same Day)</a></li><li><a href="ClientFundObligationPayoutSameDay.aspx" target="frmScr">Payout - Sett no
         Wise(Same Day)</a></li><li><a href="ClientFundObligationPayoutDateWiseSameDay.aspx" target="frmScr">Payout
         - Datewise(Same Day)</a></li></ul></li><li><a href="ClientFundObligationPayout.aspx" target="frmScr">Client Funds Payout</a></li><li><a href="frmrptMemberFundsPayout.aspx" target="frmScr">Datewise Member Funds Payout
         Report</a></li><li><a href="frmrptMemberFundsPayoutDetailed.aspx" target="frmScr">Datewise Member Funds
         Payout Report(Detailed)</a></li><li><a href="ClientRedeemObligation.aspx" target="frmScr">Client Del Obligation</a></li><li><a href="RptOrderStatusReport.aspx" target="frmScr">Order Status Report</a></li><li><a href="CommonReports.aspx?RptName=SECDELCONF&amp;RptDesc=Demat%20Delivery%20Statement" target="frmScr">Demat Del Statement</a></li><li><a href="CommonReports.aspx?RptName=FUNDSCONF&amp;RptDesc=Funds%20Confirmation%20Statement" target="frmScr">Fund Conf Statement</a></li><li><a href="CommonReports.aspx?RptName=REDEEMSUCCESS&amp;RptDesc=Redemption%20Statement" target="frmScr">Redemption Statement</a></li><li><a href="CommonReports.aspx?RptName=ALLOTSUCCESS&amp;RptDesc=Allotment%20Statement" target="frmScr">Allotment Statement</a></li></ul></li><li class="has-sub"><span class="submenu-button"></span><a href="Blank.aspx" target="frmScr">SIP</a><ul><li><a href="frmrptSIPRegn.aspx" target="frmScr">SIP Registration Report</a></li><li><a href="frmrptBrokerSIPReport.aspx" target="frmScr">SIP Installment Due Report</a></li><li><a href="frmSIPCancellationReport.aspx" target="frmScr">SIP Cancellation Report</a></li><li><a href="SIPToXSIPShiftReport.aspx" target="frmScr">SIP To XSIP Shift Report</a></li></ul></li><li class="has-sub"><span class="submenu-button"></span><a href="Blank.aspx" target="frmScr">X-SIP \ I-SIP</a><ul><li><a href="frmMandateDownloadForMember.aspx" target="frmScr">Mandate Download</a></li><li><a href="frmRptXSIPRegistration.aspx" target="frmScr">X-SIP/I-SIP Registration Report</a></li><li><a href="frmRptXSIPInstallmentDueReport.aspx" target="frmScr">X-SIP/I-SIP Installment
         Due Report</a></li><li><a href="frmrptXSIPBrokerageReportForMembers.aspx" target="frmScr">Brokerage Report</a></li></ul></li><li class="has-sub"><span class="submenu-button"></span><a href="Blank.aspx" target="frmScr">STP</a><ul><li><a href="STPRegistrationReport.aspx" target="frmScr">STP Registration Report</a></li><li><a href="STPInstallmentDueReport.aspx" target="frmScr">STP Installment Due Report</a></li><li><a href="STPCancellationReport.aspx" target="frmScr">STP Cancellation Report</a></li></ul></li><li class="has-sub"><span class="submenu-button"></span><a href="Blank.aspx" target="frmScr">SWP</a><ul><li><a href="SWPRegistrationReport.aspx" target="frmScr">SWP Registration Report</a></li><li><a href="SWPInstallmentDueReport.aspx" target="frmScr">SWP Installment Due Report</a></li><li><a href="SWPCancellationReport.aspx" target="frmScr">SWP Cancellation Report</a></li></ul></li><li class="has-sub"><span class="submenu-button"></span><a href="Blank.aspx" target="frmScr">SGB</a><ul><li><a href="RptSGB.aspx" target="frmScr">SGB Report</a></li><li><a href="SGBCommissionReport.aspx" target="frmScr">SGB Commission Report</a></li><li><a href="SGBInterestReport.aspx" target="frmScr">SGB Interest Report</a></li></ul></li><li class="has-sub"><span class="submenu-button"></span><a href="Blank.aspx" target="frmScr">New Reports</a><ul><li class="has-sub"><span class="submenu-button"></span><a href="Blank.aspx" target="frmScr">Orders Reports</a><ul><li><a href="RptProvisionalOrderReportNew.aspx" target="frmScr">Provisional Orders</a></li><li><a href="RptProvisionalOrderReportNew.aspx?RptType=FOT" target="frmScr">Provisional Orders (First Order Today)</a></li><li><a href="RptProvisionalOrderReportOffline.aspx" target="frmScr">Provisional Orders Offline</a></li><li><a href="RptOrderStatusReportNew.aspx" target="frmScr">Order Status</a></li><li><a href="RptAllotmentStatementNew.aspx" target="frmScr">Allotment Statement</a></li><li><a href="RptRedemptionStatementNew.aspx" target="frmScr">Redemption Statement</a></li><li><a href="RptSpreadOrderDetails.aspx" target="frmScr">Spread Orders Report</a></li><li><a href="RptSwitchReport.aspx" target="frmScr">Switch Report</a></li><li><a href="OrderwisePayoutShortageDPC.aspx" target="frmScr">Orderwise Payout Shortages Details(DPC)</a></li></ul></li><li class="has-sub"><span class="submenu-button"></span><a href="Blank.aspx" target="frmScr">Payment Reports</a><ul><li><a href="RptPaymentModeReport.aspx" target="frmScr">Payment Mode Report</a></li><li><a href="RptAgewiseBankwiseOrdersFundsReceived.aspx" target="frmScr">Funds Received Reports</a></li></ul></li><li class="has-sub"><span class="submenu-button"></span><a href="Blank.aspx" target="frmScr">Master Reports</a><ul><li><a href="FATCAReport.aspx" target="frmScr">FATCA Report</a></li><li><a href="CKYCReport.aspx" target="frmScr">CKYC Report</a></li><li><a href="DownloadUpdateClientDetails.aspx" target="frmScr">Download Update Client Details</a></li><li><a href="RptClientDetails.aspx" target="frmScr">Client Master Report Old</a></li></ul></li><li class="has-sub"><span class="submenu-button"></span><a href="Blank.aspx" target="frmScr">Email/SMS Reports</a><ul><li><a href="RptRedemtionOrderSMSLog.aspx" target="frmScr">Redemption Order SMS Log Details</a></li><li><a href="RptPaymentGatewayEmailLog.aspx" target="frmScr">Payment Gateway Email Log</a></li></ul></li><li class="has-sub"><span class="submenu-button"></span><a href="Blank.aspx" target="frmScr">Member Reports</a><ul><li><a href="MemberPaymentRejectionDownloadFile.aspx" target="frmScr">Payment Rejection Download</a></li><li><a href="FrmRptMemberwisePayoutShortage.aspx" target="frmScr">Memberwise Payout Shortage Details</a></li><li><a href="RptImageUploadReport.aspx" target="frmScr">Image Upload Report</a></li><li><a href="RedemptionPayoutReport.aspx" target="frmScr">Redemption Payout Date Report</a></li><li><a href="PANWiseStatusSearch.aspx" target="frmScr">PANWise Status Search</a></li></ul></li></ul></li></ul></li><li name="item" class="has-sub"><span class="submenu-button"></span>
                                                 <a href="Blank.aspx" rel="UTI0000001" target="frmScr">Utilities</a><ul id="UTI0000001"><li class="has-sub"><span class="submenu-button"></span><a href="Blank.aspx" target="frmScr">Member Related</a><ul><li><a href="QuickOrderEntry.aspx" target="frmScr">Quick Order</a></li><li><a href="PlaceOrderRedemption.aspx" target="frmScr">Minimum Qty Redemption Order Entry</a></li><li><a href="ViewOrder.aspx" target="frmScr">View Orders</a></li><li><a href="BulkFileUpload.aspx?TransType=IMP_MASTER" target="frmScr">Bulk Upload New</a></li><li><a href="FileUpload.aspx" target="frmScr">Bulk Upload</a></li><li><a href="UploadClientDealerMap.aspx" target="frmScr">Upload Client Mapping &amp; Balances</a></li><li><a href="ManualFileUpload.aspx" target="frmScr">Upload Client Deposits</a></li><li><a href="frmUpdateClientDealerMapping.aspx" target="frmScr">Upload Client Dealer Mapping</a></li><li><a href="frmUploadOrderCancellation.aspx" target="frmScr">Upload Order Cancellation</a></li><li><a href="DealerDeposits.aspx" target="frmScr">Dealer Deposits</a></li><li><a href="frmUploadMemberFundsForGateway.aspx" target="frmScr">Upload Member Funds Gateway</a></li></ul></li><li><a href="ChangePassword.aspx" target="frmScr">Change Password</a></li></ul></li><li name="item"><a href="LogOut.aspx" target="_top"><i class="fa fa-sign-out"></i>Log Out</a></li></ul></div>

CSS

@import url(https://fonts.googleapis.com/css?family=Source+Sans+Pro);
#cssmenu,
#cssmenu ul,
#cssmenu ul li,
#cssmenu ul li a,
#cssmenu #menu-button {
  margin: 0;
  padding: 0;
  border: 0;
  list-style: none;
  line-height: 1;
  display: block;
  position: relative;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  overflow:inherit;
  padding-top: 3px;
   padding-bottom: 2px;
   z-index:10000;
}
#cssmenu:after,
#cssmenu > ul:after {
  content: ".";
  display: block;
  clear: both;
  visibility: hidden;
  line-height: 0;
  height: 0;
  z-index:900;
}
#cssmenu #menu-button {
  display: none;
}
#cssmenu {
  font-family: Montserrat, sans-serif;
  background: #0090c0;
}
#cssmenu > ul > li {
  float: left;
   margin:0;
    padding:0;
}
#cssmenu.align-center > ul {
  font-size: 0;
  text-align: center;
}
#cssmenu.align-center > ul > li {
  display: inline-block;
  float: none;
}
#cssmenu.align-center ul ul {
  text-align: left;
}
#cssmenu.align-right > ul > li {
  float: right;
}
/*
#cssmenu > ul > li > a {
  padding: 17px;
  font-size: 12px;
  letter-spacing: 1px;
  text-decoration: none;
  color: #dddddd;
  font-weight: 700;
  text-transform: uppercase;
   overflow:visible !important;
  overflow-x: auto;
}
*/
#cssmenu > ul > li > a {
  padding: 6px;
  font-size: 10px;
  letter-spacing: 0.2px;
  text-decoration: none;
  color: #dddddd;
  font-weight: 700;
  text-transform: uppercase;
   overflow:visible !important;
  overflow-x: auto;
}
#cssmenu > ul > li:hover > a {
  color: #ffffff;
  /* Main menu border- */
}
#cssmenu > ul > li.has-sub > a {
  padding-right: 25px;
}
#cssmenu > ul > li.has-sub > a:after {
  position: absolute;
  top: 9px;
  right: 11px;
  width: 8px;
  height: 2px;
  display: block;
  background: #dddddd;
  content: '';
  /* Main menu plus sign */
}
#cssmenu > ul > li.has-sub > a:before {
  position: absolute;
  top: 6px;
  right: 14px;
  display: block;
  width: 2px;
  height: 8px;
  background: #dddddd;

  content: '';
   /* Main menu plus sign */
  -webkit-transition: all .25s ease;
  -moz-transition: all .25s ease;
  -ms-transition: all .25s ease;
  -o-transition: all .25s ease;
  transition: all .25s ease;
}
#cssmenu > ul > li.has-sub:hover > a:before {
  top: 18px;
  height: 0;
   visibility:visible;
    display:block;
}
#cssmenu ul ul {
  position: absolute;
  left: -9999px;
}
#cssmenu.align-right ul ul {
  text-align: right;
}
#cssmenu ul ul li {
  height: 0;
  -webkit-transition: all .25s ease;
  -moz-transition: all .25s ease;
  -ms-transition: all .25s ease;
  -o-transition: all .25s ease;
  transition: all .25s ease;
}
#cssmenu li:hover > ul {
  left: auto;
}
#cssmenu.align-right li:hover > ul {
  left: auto;
  right: 0;
}
#cssmenu li:hover > ul > li {
  height: 35px;
}
#cssmenu ul ul ul {
  margin-left: 100%;
  top: 0;
}
#cssmenu.align-right ul ul ul {
  margin-left: 0;
  margin-right: 100%;
}
#cssmenu ul ul li a {
  border-bottom: 1px solid rgba(150, 150, 150, 0.15);
  padding: 11px 15px;
  width: 170px;
  font-size: 12px;
  text-decoration: none;
  color: #dddddd;
  font-weight: 400;
  background: #ff6030;
  padding:1em 2em;
}
#cssmenu ul ul li:last-child > a,
#cssmenu ul ul li.last-item > a {
  border-bottom: 0;
}
#cssmenu ul ul li:hover > a,
#cssmenu ul ul li a:hover {
  color: #ffffff;
  background-color: #c04830;
}
#cssmenu ul ul li.has-sub > a:after {
  position: absolute;
  top: 16px;
  right: 11px;
  width: 8px;
  height: 2px;
  display: block;
  background: #dddddd;
  content: '';
}
#cssmenu.align-right ul ul li.has-sub > a:after {
  right: auto;
  left: 11px;
}
#cssmenu ul ul li.has-sub > a:before {
  position: absolute;
  top: 13px;
  right: 14px;
  display: block;
  width: 2px;
  height: 8px;
  background: #dddddd;
  content: '';
  -webkit-transition: all .25s ease;
  -moz-transition: all .25s ease;
  -ms-transition: all .25s ease;
  -o-transition: all .25s ease;
  transition: all .25s ease;
}
#cssmenu.align-right ul ul li.has-sub > a:before {
  right: auto;
  left: 14px;
}
#cssmenu ul ul > li.has-sub:hover > a:before {
  top: 17px;
  height: 0;
}

@media all and (max-width: 768px), only screen and (-webkit-min-device-pixel-ratio: 2) and (max-width: 1024px), only screen and (min--moz-device-pixel-ratio: 2) and (max-width: 1024px), only screen and (-o-min-device-pixel-ratio: 2/1) and (max-width: 1024px), only screen and (min-device-pixel-ratio: 2) and (max-width: 1024px), only screen and (min-resolution: 192dpi) and (max-width: 1024px), only screen and (min-resolution: 2dppx) and (max-width: 1024px) {
  #cssmenu {
    width: 100%;
  }
  #cssmenu ul {
    width: 100%;
    display: none;
  }
  #cssmenu.align-center > ul {
    text-align: left;
  }
  #cssmenu ul li {
    width: 100%;
    border-top: 1px solid rgba(120, 120, 120, 0.2);
  }
  #cssmenu ul ul li,
  #cssmenu li:hover > ul > li {
    height: auto;
  }
  #cssmenu ul li a,
  #cssmenu ul ul li a {
    width: 100%;
    border-bottom: 0;
  }
  #cssmenu > ul > li {
    float: none;
  }
  #cssmenu ul ul li a {
    padding-left: 25px;
  }
  #cssmenu ul ul ul li a {
    padding-left: 35px;
  }
  #cssmenu ul ul li a {
    color: #dddddd;
    background: none;
  }
  #cssmenu ul ul li:hover > a,
  #cssmenu ul ul li.active > a {
    color: #ffffff;
  }
  #cssmenu ul ul,
  #cssmenu ul ul ul,
  #cssmenu.align-right ul ul {
    position: relative;
    left: 0;
    width: 100%;
    margin: 0;
    text-align: left;
  }
  #cssmenu > ul > li.has-sub > a:after,
  #cssmenu > ul > li.has-sub > a:before,
  #cssmenu ul ul > li.has-sub > a:after,
  #cssmenu ul ul > li.has-sub > a:before {
    display: none;
  }
  #cssmenu #menu-button {
    display: block;
    padding: 17px;
    color: #dddddd;
    cursor: pointer;
    font-size: 12px;
    text-transform: uppercase;
    font-weight: 700;
  }
  #cssmenu #menu-button:after {
    position: absolute;
    top: 22px;
    right: 17px;
    display: block;
    height: 4px;
    width: 20px;
    border-top: 2px solid #dddddd;
    border-bottom: 2px solid #dddddd;
    content: '';
  }
  #cssmenu #menu-button:before {
    position: absolute;
    top: 16px;
    right: 17px;
    display: block;
    height: 2px;
    width: 20px;
    background: #dddddd;
    content: '';
  }
  #cssmenu #menu-button.menu-opened:after {
    top: 23px;
    border: 0;
    height: 2px;
    width: 15px;
    background: #ffffff;
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    -o-transform: rotate(45deg);
    transform: rotate(45deg);
  }
  #cssmenu #menu-button.menu-opened:before {
    top: 23px;
    background: #ffffff;
    width: 15px;
    -webkit-transform: rotate(-45deg);
    -moz-transform: rotate(-45deg);
    -ms-transform: rotate(-45deg);
    -o-transform: rotate(-45deg);
    transform: rotate(-45deg);
  }
  #cssmenu .submenu-button {
    position: absolute;
    z-index: 99;
    right: 0;
    top: 0;
    display: block;
    border-left: 1px solid rgba(120, 120, 120, 0.2);
    height: 46px;
    width: 46px;
    cursor: pointer;
  }
  #cssmenu .submenu-button.submenu-opened {
    background: #262626;
  }
  #cssmenu ul ul .submenu-button {
    height: 34px;
    width: 34px;
  }
  #cssmenu .submenu-button:after {
    position: absolute;
    top: 22px;
    right: 19px;
    width: 8px;
    height: 2px;
    display: block;
    background: #dddddd;
    content: '';
  }
  #cssmenu ul ul .submenu-button:after {
    top: 15px;
    right: 13px;
  }
  #cssmenu .submenu-button.submenu-opened:after {
    background: #ffffff;
  }
  #cssmenu .submenu-button:before {
    position: absolute;
    top: 19px;
    right: 22px;
    display: block;
    width: 2px;
    height: 8px;
    background: #dddddd;
    content: '';
  }
  #cssmenu ul ul .submenu-button:before {
    top: 12px;
    right: 16px;
  }
  #cssmenu .submenu-button.submenu-opened:before {
    display: none;
  }


}

我还创造了一个小提琴，以便您更好地理解：http://jsfiddle.net/G7qfq/582/

导航子菜单超出html css中的屏幕大小

0 个答案: