我有这个页面：http://www.bkd.com/industries/private-equity/think-differently.htm。在我在整个网站上实现这一点之前，我希望在调整窗口大小，在手机或平板电脑上查看它时可以使用它。
当您调整窗口大小或在平板电脑中查看时，搜索栏与灰色栏中的导航词重叠。 （行业，服务，思考，客户成功）
当窗口调整大小或在平板电脑上查看窗口时，我需要保持原样。
我提前为所有HTML道歉。导航由前任员工构建。
CSS
ul.meg-menu {
position:absolute;
padding:0px;
margin: 0px;
line-height:17px;
}
ul.meg-menu li.mgmu {
float:left;
}
ul.meg-menu li.mgmu a.hov1, ul.meg-menu li.mgmu a.hov2, ul.meg-menu li.mgmu a.hov3, ul.meg-menu li.mgmu a.hov4 {
float:left;
padding: 25px 21px 10px 10px;
}
ul.meg-menu li.mgmu div.meg-dd {
display: none;
background:url(/images/common/mdd/mdd-bg.png) no-repeat bottom ;
left:-240px;
padding: 15px 15px 20px 15px;
position: absolute;
top: 77px;
width: 926px;
}
ul.meg-menu li.mgmu div.meg-dd ul {
padding: 0px 10px 0px 0px;
}
ul.meg-menu li.mgmu div.meg-dd h4 {
padding-left: 0px;
line-height: normal;
margin-bottom:5px;
font-weight:bold;
color: #404040;
}
ul.meg-menu li.mgmu div.meg-dd h4 a {
color: #404040;
}
ul.meg-menu li.mgmu div.meg-dd a {
color: #404040;
}
ul.meg-menu li.mgmu div.meg-dd .bd-right {
border-right: solid 1px #cccccc;
}
ul.meg-menu li.mgmu div.meg-dd .bd-bottom {
border-bottom: solid 1px #cccccc;
}
ul.meg-menu li.mgmu div.meg-dd .bd-top {
border-top: solid 1px #cccccc;
}
ul.meg-menu li.mgmu div.meg-dd a:hover {
color: #b32017;
text-decoration:none;
}
ul.meg-menu li.hovering div.meg-dd {
display: block;
}
ul.meg-menu li.hovering.mgmu a.hov1, ul.meg-menu li a.hov1:hover { background: url(/images/common/mdd/services-hover.png) top center no-repeat;}
ul.meg-menu li.hovering.mgmu a.hov2, ul.meg-menu li a.hov2:hover { background: url(/images/common/mdd/industries-hover.png) top center no-repeat;}
ul.meg-menu li.hovering.mgmu a.hov3, ul.meg-menu li a.hov3:hover { background: url(/images/common/mdd/thoughtware-hover.png) top center no-repeat;}
ul.meg-menu li.hovering.mgmu a.hov4, ul.meg-menu li a.hov4:hover { background: url(/images/common/mdd/thoughtware-hover.png) top center no-repeat;}
.mdd-video {font-size:11px; text-align:center;}
.mdd-video p {margin: 0px; padding: 0px;}
HTML
`<div class="clear"></div>
<div class="span-8"> <a class="left" style="padding: 0px 0px 0px 0px; margin-left: 110px;" href="/"><img src="/images/common/header/logo.png" border="0"></a> </div>
<div class="span-0" style="padding:5px 0px 0px 80px">
<ul style="z-index:2000;" class="meg-menu">
<li class="mgmu" ><a class="hov1" href="/services/services.htm"><img alt="Services" src="/images/common/mdd/services.png" style="padding-right:20px" ></a>
<div class="meg-dd">
<div style="width:150px; margin-left:5px" class="span-0 mr-rt-3 ">
<h4 ><a href="http://www.bkd.com/services/audit-assurance.htm">Audit & Assurance</a></h4>
<ul>
<li><a href="/services/assurance.htm">Assurance</a></li>
<li><a href="/services/lease-accounting.htm">Lease Accounting</a></li>
</ul>
<h4 ><a href="http://www.bkd.com/services/tax.htm"><strong>Tax</strong></a></h4>
<ul>
<li><a href="/services/accounting-outsourcing.htm">Accounting Outsourcing</a></li>
<li><a href="/services/estate-tax.htm">Estate Tax</a></li>
<li><a href="/services/international-tax-services.htm">International Tax</a></li>
<li><a href="/services/state-local-tax.htm">State & Local Tax</a></li>
<li><a href="/services/real-estate-cost-segregation.htm">Real Estate Cost Segregation</a></li>
<li><a href="/services/research-development-tax-credits.htm">R&D Tax Credits</a></li>
<li><a href="/services/repair-regulations.htm">Repair Regulations</a></li>
<li><a href="/services/transfer-pricing-tax.htm">Transfer Pricing</a></li>
</ul>
</div>
<div style="width:200px; margin-left:5px" class="span-0 mr-rt-3 ">
<div style="width:715px"> <h4><a href="http://www.bkd.com/services/advisory.htm">Advisory</a> </h4></div>
<ul>
<li><strong><a href="/services/business-transition-services.htm">Business Transition Services</a></strong>
<ul>
<li><a href="/services/mergers-acquisitions.htm">Mergers & Acquisitions</a></li>
<li><a href="/services/company-sales-divestitures.htm">Company Sales & Divestitures</a></li>
<li><a href="/services/management-buyouts.htm">Management Buyouts</a></li>
<li><a href="/services/debt-equity-financing.htm">Debt & Equity Financing</a></li>
<li><a href="/services/succession-planning-value.htm">Succession Planning & Value</a></li>
<li><a href="/services/recapitalizations.htm">Recapitalizations</a></li>
<li><a href="/services/transaction-services.htm">Transaction Services</a></li>
<li><a href="/services/business-owner-succession.htm">Business Owner Succession</a></li>
<li><a href="/services/exit-strategies.htm">Exit Strategies</a></li>
<li><a href="/services/esop-succession-planning.htm">ESOP Succession Planning</a></li>
</ul>
</li>
</ul>
</div>
<div style="width:210px; margin-left:5px" class="span-0 mr-rt-3 ">
<br /><br />
<ul>
<li><strong><a href="/wealth-advisors/index.htm">Wealth Management</a></strong>
<ul>
<li><a href="/wealth-advisors/services/index.htm">Financial Planning</a></li>
<li><a href="/wealth-advisors/services/index.htm">Retirement Planning</a></li>
<li><a href="/wealth-advisors/services/index.htm">Education Funding</a></li>
<li><a href="/wealth-advisors/services/index.htm">Estate Planning</a></li>
<li><a href="/wealth-advisors/services/index.htm">Investment Management</a></li>
<li><a href="/wealth-advisors/services/index.htm">Charitable Gift Strategies</a></li>
<li><a href="/wealth-advisors/services/index.htm">Benefit Plan Consulting</a></li>
<li><a href="/services/wealthplan.htm">WealthPlan</a></li>
<li><a href="/services/tax-strategies.htm">Tax Strategies</a></li>
<li><a href="/services/risk-management.htm">Risk Management</a></li>
</ul>
</li>
</ul>
</div>
<div style="width:260px; margin-left:5px" class="span-0 "><br />
<br />
<h4><a href="/services/employee-benefit-plans.htm">Employee Benefit Plans</a></h4>
<h4><a href="/services/forensics-investigation-litigation.htm">Forensics, Investigation, Litigation</a></h4>
<h4><a href="/services/enterprise-risk-solutions.htm">Enterprise Risk Solutions</a></h4>
<h4><a href="/technologies/">Information Technology</a></h4>
<h4><a href="/services/international-services.htm">International Services</a></h4>
<h4><a href="/industries/">Performance Services</a></h4>
<h4><a href="/services/valuation-services.htm">Valuation Services</a></h4>
</div>
</div>
</li>
<li class="mgmu"><a class="hov2" href="/industries/"><img alt="Industries" src="/images/common/mdd/industries.png" style="padding-right:20px"></a>
<div class="meg-dd">
<div style="width:230px; margin-left:5px" class="span-0 mr-rt-3 ">
<h4 ><a href="/industries/health-care/">Health Care</a></h4>
<ul>
<li><a href="/industries/health-care/community-health-centers/">Community Health Centers</a></li>
<li><a href="/industries/health-care/compliance-corporate-integrity/">Compliance & Corporate Integrity</a></li>
<li><a href="/industries/health-care/forecasts-strategic-planning/">Forecasts & Strategic Planning</a></li>
<li><a href="/industries/health-care/home-care-hospice/">Home Care & Hospice</a></li>
<li><a href="/industries/health-care/hospitals/">Hospitals</a></li>
<li><a href="/industries/health-care/long-term-care/">Long-Term Care & Senior Living</a></li>
<li><a href="/industries/health-care/operations-clinical-consulting/">Operations & Clinical Consulting</a></li>
<li><a href="/industries/health-care/physician-services/">Physician Services</a></li>
</ul>
<h4 ><a href="/industries/manufacturing-distribution/">Manufacturing & Distribution</a></h4>
<ul>
<li><a href="/industries/manufacturing-distribution/operations-consulting.htm">Operations Consulting</a></li>
<li><a href="/industries/manufacturing-distribution/performance-measurements.htm">Performance Measurement</a></li>
</ul>
<h4><a href="/industries/private-equity/">Private Equity</a></h4>
<ul>
<li><a href="/services/transaction-services.htm">Transaction Services</a></li></ul>
</div>
<div style="width:210px; margin-left:5px" class="span-0 mr-rt-3 ">
<h4 ><a href="/industries/energy/">Energy</a></h4>
<ul>
<li><a href="/industries/energy/exploration-and-production.htm">Exploration & Production</a></li>
<li><a href="/industries/energy/oil-gas.htm">Oilfield Services</a></li>
<li><a href="/industries/energy/midstream-downstream.htm">Midstream & Downstream</a></li>
<li><a href="/industries/energy/utilities.htm">Power</a></li>
<li><a href="/industries/energy/vendor-audit-services.htm">Vendor Audit Services</a></li>
</ul>
<h4 ><a href="/industries/financial-services/">Financial Services</a></h4>
<ul>
<li><a href="/industries/financial-services/de-novo-banks.htm">De Novo Banks</a></li>
<li><a href="/industries/financial-services/enterprise-risk-management.htm">Enterprise Risk Management</a></li>
<li><a href="/industries/financial-services/financial-restructuring.htm">Financial Restructuring</a></li>
<li><a href="/industries/financial-services/internal-audit.htm">Internal Audit</a></li>
<li><a href="/industries/financial-services/loan-review.htm">Loan Reviews</a></li>
<li><a href="/industries/financial-services/profitability-enhancement.htm">Profitability Enhancement</a></li>
<li><a href="/industries/financial-services/regulatory-compliance.htm">Regulatory Compliance</a></li>
<li><a href="/industries/financial-services/strategic-financial-planning.htm">Strategic Financial Planning</a></li>
<li><a href="/industries/financial-services/tax-services.htm">Tax Services</a></li>
</ul>
</div>
<div style="width:220px; margin-left:5px" class="span-0 mr-rt-3 ">
<h4 ><a href="/industries/not-for-profit/">Not-for-Profit</a></h4>
<ul>
<li><a href="/industries/not-for-profit/foundations.htm">Foundations</a></li>
<li><a href="/industries/not-for-profit/membership-organizations.htm">Membership Organizations</a></li>
<li><a href="/industries/not-for-profit/religious-organizations.htm">Religious Organizations</a></li>
</ul>
<h4 ><a href="/industries/government/">Government</a></h4>
<ul>
<li><a href="/industries/government/airport-transportation-authorities.htm">Airport & Transportation Authorities</a></li>
<li><a href="/industries/government/municipal-state-government.htm">Municipal & State Government</a></li>
<li><a href="/industries/government/public-power-utilities.htm">Public Power & Utilities</a></li>
<li><a href="/industries/government/tribal-government.htm">Tribal Government</a></li>
</ul>
<h4><a href="/industries/higher-education/">Higher Education</a></h4>
<ul>
<li><a href="/industries/higher-education/integraprotect.htm">Managing Reputational Risk</a></li></ul>
<h4 ><a href="/industries/construction-real-estate/">Construction & Real Estate</a></strong><a href="/industries/construction-real-estate/"></a></h4>
<ul>
<li><a href="/industries/construction-real-estate/architecture-engineering/">Architecture & Engineering</a></li>
<li><a href="/industries/construction-real-estate/construction/">Construction</a></li>
<li><a href="/industries/construction-real-estate/real-estate/">Real Estate</a></li>
</ul>
</div>
<div style="width:180px; margin-left:5px" class="span-0 ">
<h4><a href="/industries/dealerships/">Dealerships</a></h4>
<h4><a href="/industries/individuals/">Individuals</a></h4>
<h4><a href="/industries/insurance-services/">Insurance Services</a></h4>
<h4><a href="/industries/retail/">Retail</a></h4>
<h4><a href="/industries/service-organizations/">Service Organizations</a></h4>
<h4><a href="/industries/technology/">Technology & Communications</a></h4>
<h4><a href="/industries/transportation/">Transportation & Logistics </a></h4>
</div>
</div>
</li>
<li class=" mgmu"><a class="hov3" href="/thought-center/"><img alt="Though Center" src="/images/common/mdd/thoughtware.png" style="padding-right:20px"></a>
<div class="meg-dd">
<div style="width:240px; margin-left:5px" class="span-0 mr-rt-3 ">
<h4><a href="/articles/">Articles </a></h4>
<ul style="margin-bottom:5px;">
<li><a href="/articles/industry/"><strong>Industry</strong></a>
</li>
<li><a href="/articles/tax/"><strong>Tax</strong></a> </li>
<ul>
<li><a href="/articles/tax/salt/">State & Local Tax</a></li>
<li><a href="/articles/tax/international-tax/">International Tax</a></li>
</ul>
<li><a href="/articles/accounting-auditing/"><strong>Accounting & Auditing</strong></a> </li>
<li><a href="/articles/advisory/"><strong>Advisory</strong></a>
<ul>
<li><a href="/articles/advisory/forensics-investigation-litigation/">Forensics, Investigation & Litigation</a></li>
<li><a href="/articles/advisory/information-technology/">Information Technology</a></li>
<li><a href="/articles/advisory/wealth-management/">Wealth Management</a></li>
<li><a href="/articles/advisory/it-risk-services/">IT Risk Services</a></li>
</ul>
</li>
<li><a href="/articles/software/"><strong>Software</strong></a> </li>
</ul>
</div>
<div style="width:170px; margin-left:5px" class="span-0 mr-rt-3 ">
<h4><a href="/webinars/">Webinars </a></h4>
<ul>
<li><a href="/webinars/cre/">Construction & Real Estate</a></li>
<li><a href="/webinars/fs/">Financial Services</a></li>
<li><a href="/webinars/government/">Government</a></li>
<li><a href="/webinars/hc/">Health Care</a></li>
<li><a href="/webinars/higher-education/">Higher Education</a></li>
<li><a href="/webinars/insurance-services/">Insurance Services</a></li>
<li><a href="/webinars/md/">Manufacturing & Distribution</a></li>
<li><a href="/webinars/not-for-profit/">Not-for-Profit</a></li>
<li><a href="/service/Forensics/institute/index.htm"> Forensics Institute</a></li>
<li><a href="/webinars/forensics-valuation/">Forensics & Valuation</a></li>
<li><a href="/webinars/microsoft-dynamics/">Microsoft Dynamics</a></li>
<li><a href="/webinars/sage-software/">Sage Software</a></li>
</ul>
</div>
<div style="width:150px; margin-left:5px" class="span-0 mr-rt-3 ">
<h4><a href="/blogs/">Blogs</a></h4>
<ul>
<li><a href="http://bkdforensics.com/">BKD Forensics </a></li>
<li><a href="http://www.dynamicsgpinsights.com/">Dynamics GP </a></li>
<li><a href="http://sageerpinsights.com/">Sage ERP Insights </a></li>
</ul>
<h4><a href="/videos/">Videos</a></h4>
<ul>
<li><a href="/videos/industry-insights/">Industry Insights</a></li>
<li><a href="/videos/market-insights.htm">Market Insights</a></li>
<li><a href="/videos/technologies.htm">Technologies</a></li>
</ul>
</div>
<div style="width:280px; margin-left:5px" class="span-0 ">
<h4><a href="http://pages.bkd.com/SubscriptionManagement_Center.html">Email Subscriptions</a></h4>
<h4><a href="/events/Calendar.htm">Events Calendar</a></h4>
<h4><a href="/stay-connected/">Stay Connected</a></h4>
<h4><a href="/thought-center/speakers-bureau/">Speakers' Bureau</a></h4>
</div>
</div>
</li>
<li class=" mgmu"><a class="hov4" href="/client-success/"><img alt="Client Success" src="/images/common/mdd/client-success.png" ></a></li>
</li>
</ul>
</div>
<div style="margin-top:25px; float:right" class="span-0 last">
<form action="/search/">
<input type="image" src="/images/common/search/search-icon-new.png" style=" float:left; outline:none" alt="Search">
<input type="text" name="zoom_query" value="Search" style=" background-image:url(/images/common/search/search-field-new.png); background-repeat: repeat-x; margin: 0; line-height:26px; height: 26px; width:200px; color:#666; background-color:#fff; border:none; outline:hidden; border-radius: 7px; float:right; padding: 0px 0px 0 10px; margin-left: 0px;" onFocus="this.value=this.value.replace(/^Search$/, '')">
</form>
</div>
<div class="clear"></div>
<script>
$(document).ready(function() {
function addMega(){
$(this).addClass("hovering");
}
function removeMega(){
$(this).removeClass("hovering");
}
var megaConfig = {
interval: 100,
sensitivity: 4,
over: addMega,
timeout: 100,
out: removeMega
};
$("li.mgmu").hoverIntent(megaConfig)
});
</script>
`