这是一个屏幕截图
我的页面上有一个下拉列表。当我单击下拉列表时，它会弹出，然后如果我在顶部菜单栏上选择它会扩展，如上所示，无法覆盖下拉列表。任何人都可以对如何处理这个问题有所了解。
jsfiddle 演示链接
当我们首先单击下拉列表（并且不选择任何内容）并将鼠标悬停在报告菜单选项卡上时，下拉列表与菜单重叠。这是问题所在。这是html代码anywaz
<div class="Main_Nav">
<div id="globalNav">
<nav>
<ul>
<li id="HTMLID" class="first fourColumns">
<div class="NavIcon_Administration">
</div>
<a href="#" title="Administration">Administration<span></span></a>
<div class="pointer">
</div>
<div class="sub">
<div class="menu">
<ul>
<li class="title">System Management</li>
<li><a href='CallTypeMst.aspx'>Call Type</a></li>
<li><a href='AdmMenuMst.aspx'>Menu</a></li>
<li><a href='AdmProfileMst.aspx'>Profile</a></li>
<li><a href='AdmUserMst.aspx'>User</a></li>
</ul>
<ul>
<li class="title">Settings</li>
<li><a href='GeneralSettings.aspx'>General</a></li>
<li><a href='ThresholdSetting.aspx'>Threshold</a></li>
<li><a href='RouteMaintenanceSettings.aspx'>Route Maintenance</a></li>
<li><a href='FraudCallSettings.aspx'>Fraud Call</a></li>
<li><a href='ClientDetails.aspx'>Client Config</a></li>
<li><a href='ManageRateSheetDashBoard.aspx'>RateSheet</a></li>
<li><a href='DefaultRoute.aspx'>Default Routing</a></li>
<li><a href='CallAlert.aspx'>Call Alert</a></li>
</ul>
</div>
</div>
</li>
<li id="HTMLID" class="first fourColumns">
<div class="NavIcon_Operation">
</div>
<a href="#" title="Operations">Operations<span></span></a>
<div class="pointer">
</div>
<div class="sub">
<div class="menu">
<ul>
<li class="title">Customer</li>
<li><a href='CustomerAdministration.aspx'>Administration</a></li>
<li><a href='CustomerRateSheetActivate.aspx'>Activate Rate Sheet</a></li>
<li><a href='CustomerRateActivationHistory.aspx'>Activation History</a></li>
<li><a href='CustomerRSCompare.aspx'>Compare RateSheet </a></li>
</ul>
<ul>
<li class="title">Carrier</li>
<li><a href='CarrierAdministration.aspx'>Administration</a></li>
<li><a href='CarrierRSCompare.aspx'>Compare Rate Sheet</a></li>
</ul>
<ul>
<li class="title">LCR</li>
<li><a href='LCRRebuildNew.aspx'>Build LCR</a></li>
<li><a href='LCRRebuildHistory.aspx'>Build History</a></li>
<li><a href='LCRActivationNew.aspx'>Activate LCR</a></li>
<li><a href='LCRActivationHistory.aspx'>Activation History</a></li>
<li><a href='EditLCR.aspx'>Edit LCR</a></li>
<li><a href='LCRDownload.aspx'>Download LCR</a></li>
<li><a href='RouteBlocking.aspx'>Route Block</a></li>
<li><a href='LCRActivationForNewClient.aspx'>Synchronization</a></li>
</ul>
<ul>
<li class="title">Fax & Inbound</li>
<li><a href='FaxSettings.aspx'>Fax Service</a></li>
<li><a href='InboundTollFreeAdd.aspx'>Add Inbound Number</a></li>
<li><a href='InboundTollFreeBulkUpload.aspx'>Inbound BulkUpload</a></li>
</ul>
<ul>
<li class="title">Lerg & Network</li>
<li><a href='LergUpdation.aspx'>Lerg Administration</a></li>
<li><a href='NetworkMaster.aspx'>Network Administration</a></li>
</ul>
<ul>
<li class="title">Maintenance</li>
<li><a href='RouteMaintenanceMst.aspx'>Route Maintenance</a></li>
<li><a href='FraudCallBlackList.aspx'>Fraud Call Black List</a></li>
</ul>
</div>
</div>
</li>
<li id="HTMLID" class="singleColumn">
<div class="NavIcon_Reports">
</div>
<a href="#" title="Reports">Reports<span></span></a>
<div class="pointer">
</div>
<div class="sub">
<div class="menu">
<ul>
<li class="title">Summary</li>
<li><a href='DailySummary.aspx'>Daily Summary</a></li>
<li><a href='CallStatus.aspx'>Call Status</a></li>
<li><a href='CallStatisticsReport.aspx'>Call Statistics</a></li>
<li><a href='CarrierRateSheetDashboard.aspx'>RateSheet Summary</a></li>
<li><a href='AuditLog.aspx'>Audit Log</a></li>
<li><a href='ManageLogFiles.aspx'>Log Files</a></li>
<li><a href='ServiceMonitor.aspx'>Service Monitor</a></li>
</ul>
<ul>
<li class="title">Search</li>
<li><a href='CDRArchiveSearch.aspx'>CDR</a></li>
<li><a href='LCRSearch.aspx'>LCR</a></li>
<li><a href='LergSearch.aspx'>Lerg</a></li>
<li><a href='SearchCarrierRateSheet.aspx'>Carrier Rate Sheet</a></li>
<li><a href='CustomerRateSheetSearch.aspx'>Customer Rate Sheet</a></li>
<li><a href='FraudCallBlackListSearch.aspx'>Fraud Call Black List</a></li>
<li><a href='FaxSearch.aspx'>Fax</a></li>
<li><a href='InboundTollFreeSearchDelete.aspx'>Inbound</a></li>
<li><a href='RouteBlockSearch.aspx'>RouteBlock</a></li>
</ul>
</div>
</div>
</li>
</ul>
</nav>
</div></div>
<table align="right"><tr><td align="right">
<select >
<option>Option1</option>
<option>Option2</option>
<option>Option3</option>
<option>Option4</option>
<option>Option5</option>
</select>
</td></tr></table>
这是CSS代码
.globalNav nav ul li
{
display:;
}
:focus {
outline: 0;
}
ol, ul {
list-style: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: "";
}
blockquote, q {
quotes: "" "";
}
ul,
ol {
margin: 0 0 1.357em 0;
/*color: #2C2C2C;*/
}
.contentTable {
margin: 0 0 1.357em 0;
}
.contentTable td {
padding: 0 20px;
}
p.small {
font-size: 0.786em; /* 11px */
line-height: 1.727em;
margin-bottom: 1.727em;
color: #999;
}
#globalNav li {
list-style: none;
}
/*
Primary navigation
*/
#globalNav {
float: right;
padding: 0;
width:100%;
height: 48px;
position: relative;
z-index: 55000;
/*z-index: 9999;*/
}
* html #globalNav {
background: url('../Images_v4/Master/NavMenu.png') no-repeat 0 -39px;
}
* html .middleContent {
z-index: 3000;
}
*:first-child+html .middleContent {
z-index: 3000;
}
#globalNav ul {
width: 550px;
height: 48px;
line-height: 48px;
margin: 0;
padding: 0;
float: left;
}
#globalNav ul ul {
height: auto;
}
#globalNav ul {
margin: 0;
padding: 0;
}
#globalNav li {
float: left;
height: 48px;
z-index:10;
}
#globalNav li.singleColumn {
position: relative;
}
#globalNav li a {
color: #fff;
font-size: 14px;
text-decoration: none;
/*text-shadow: 0 1px 0 #198cb6;*/
cursor: pointer;
padding: 0 0 0 10px;
float: left;
outline: none;
overflow: hidden;
max-height: 48px;
}
* html #globalNav li a {
height: 48px;
overflow: hidden;
padding-right: 10px;
position: relative;
}
*:first-child+html #globalNav li a {
height: 48px;
overflow: hidden;
padding-right: 10px;
position: relative;
}
#globalNav li.first a {
padding: 0 0 0 0px;
}
* html #globalNav li.first a {
padding: 0 10px 0 24px;
}
*:first-child+html #globalNav li.first a {
padding: 0 0px 0 0px;
}
#globalNav li a span {
height: 48px;
padding: 0;
padding-right: 10px;
float: right;
}
* html #globalNav li a span {
position: absolute;
right: 0;
top: 0;
}
*:first-child+html #globalNav li a span {
position: absolute;
right: 0;
top: 0;
}
#globalNav li a:hover {
/*background: transparent url('../Images_v4/Master/NavMenu.png') no-repeat -300px -88px;*/
}
#globalNav li.first a:hover {
padding-left: 0px;
/*background: transparent url('../Images_v4/Master/NavMenu.png') no-repeat 0 -88px;*/
}
* html #globalNav li.first a:hover {
padding-left: 24px;
/*background: transparent url('../Images_v4/Master/NavMenu.png') no-repeat 0 -88px;*/
}
#globalNav li a:hover span {
/*background: transparent url('../Images_v4/Master/NavMenu.png') no-repeat right -88px;*/
}
#globalNav li.selected {
/*background: transparent url('../Images_v4/Master/NavMenu.png') no-repeat -300px -88px;*/
}
#globalNav li a:active {
/*background: transparent url('../Images_v4/Master/NavMenu.png') no-repeat -300px -137px;*/
}
* html #globalNav li.selected {
background: transparent;
}
#globalNav li.first a:active {
/*padding-left: 24px;
background: transparent url('../Images_v4/Master/NavMenu.png') no-repeat 0 -137px;*/
}
#globalNav li.first.selected {
/*background: transparent url('../Images_v4/Master/NavMenu.png') no-repeat 0 -88px;*/
}
* html #globalNav li.first a:active {
/*padding-left: 24px;
background: transparent url('../Images_v4/Master/NavMenu.png') no-repeat 0 -137px;*/
}
#globalNav li.selected span {
/*background: transparent url('../Images_v4/Master/NavMenu.png') no-repeat right -88px;*/
}
#globalNav li a:active span {
/*background: transparent url('../Images_v4/Master/NavMenu.png') no-repeat right -137px;*/
}
* html #globalNav li.selected span {
background: transparent;
}
#header div.middleContent div#globalNav div.searchfield {
width: 165px;
float: right;
height: 48px;
background: transparent url('../Images_v4/Master/NavMenu.png') no-repeat -586px -137px;
padding-left: 20px;
}
* html #header div.middleContent div#globalNav div.searchfield {
/* position: relative; */
background: transparent url('../Images_v4/Master/NavMenu.png') no-repeat -586px -88px;
}
#header div.middleContent div#globalNav div.searchfield input {
border: none;
background: #fff;
width: 140px;
color: #666666;
font-size: 12px;
margin-right: 10px;
margin-left: 5px;
font-family: Arial, Helvetica, sans-serif;
-webkit-font-smoothing: antialiased;
outline: none;
height: 17px;
margin-top: 16px;
padding: 0;
background: white;
position: absolute;
}
html.rtl #header div.middleContent div#globalNav div.searchfield input {
margin-right: 23px;
}
html[dir=rtl] #header div.middleContent div#globalNav div.searchfield input {
margin-right: 23px;
}
#globalNav li .sub {
position: absolute;
z-index: 9999;
top: 61px;/*kp*/
display: none;
padding: 10px 0 0 0;
}
@-webkit-keyframes fadein {
0%{ opacity: 0;}
100%{ opacity: 1;}
}
#globalNav li:hover .sub {
display: block;
-webkit-animation-name: fadein;
-webkit-animation-duration: .3s;
-webkit-animation-iteration-count: once;
-webkit-animation-direction: normal;
-webkit-animation-timing-function: ease-out;
}
#globalNav li .sub .menu {
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
border: 1px solid #b20041;
-webkit-box-shadow: 0 0 10px #777;
-moz-box-shadow: 0 0 10px #777;
box-shadow: 0 0 10px #777;
background: #fff;
padding: 24px 22px 22px 10px;
overflow: hidden;
}
* html #globalNav li .sub .menu {
padding-left: 0;
}
*:first-child+html #globalNav li .sub .menu {
}
#globalNav li .sub .menu .otherFeatures {
margin: 0;
padding: 24px 0 0 0;
clear: both;
text-align: right;
line-height: 14px;
}
* html #globalNav li .sub .menu .otherFeatures {
padding: 20px 0 0 0;
}
*:first-child+html #globalNav li .sub .menu .otherFeatures {
padding: 10px 0 0 0;
}
#globalNav li .sub .menu .otherFeatures a {
text-shadow: none;
float: none;
font-weight: normal;
height: auto;
margin: 0;
padding: 0;
line-height: 14px;
color: #787878;
text-decoration: none;
}
#globalNav li .sub .menu .otherFeatures a:hover {
text-decoration: underline;
background: none;
}
#globalNav li .sub .menu ul {
display: block;
float: left;
width: 150px;
margin-left: 10px;
}
#globalNav li .sub .menu ul li {
background: none;
float: none;
line-height: 21px;
margin: 0;
margin-bottom: 3px;
padding: 0;
height: auto;
}
#globalNav li .sub .menu ul li.title {
line-height: 24px;
font-size: 14px;
color: #2c4d98;
padding: 4px 0 5px 0;
border-bottom:dotted 1px #af0040;
}
#globalNav li .sub .menu ul li.title a {
font-size: 18px;
color: #2c4d98;
}
#globalNav li .sub .menu ul li.separator {
padding: 0 0 18px 0;
margin: 0 0 18px 0;
border-bottom: 1px solid #e7e7e7;
}
#globalNav li .sub .menu ul li a {
background: none;
float: none;
color: #787878;
text-shadow: none;
text-decoration: none;
padding: 4px 0;
margin: 0;
font-size: 12px;
line-height: 19px;
/*font-weight: bold;*/
}
* html.rtl #globalNav .sub .menu ul li a {
display: inline-block;
line-height: 19px;
height: 19px;
padding: 0 0 4px 0;
}
*:first-child+html.rtl #globalNav .sub .menu ul li a {
display: inline-block;
line-height: 19px;
height: 19px;
padding: 0;
}
#globalNav li .sub .menu ul li a:hover {
background: none;
text-decoration: underline;
padding: 4px 0;
}
* html.rtl #globalNav li .sub .menu ul li a:hover {
padding: 0 0 4px 0;
}
*:first-child+html.rtl #globalNav .sub .menu ul li a:hover {
padding: 0;
}
#globalNav li .sub .menu ul li.sublink a {
font-weight: normal;
}
#globalNav li.singleColumn .sub {
left: 50%;
margin-left: -180px;/*Customized- default:-98px*/
top: 60px;
width: 400px;
}
html.rtl #globalNav li.singleColumn .sub {
left: auto;
right: 50%;
margin-left: 0;
margin-right: -98px;
}
* html.rtl #globalNav li.singleColumn .sub {
left: auto;
right: 50%;
margin-left: 0;
margin-right: -98px;
}
#globalNav li.fourColumns .sub {
left: 0;
top: 60px;/*kp*/
}
* html #globalNav li.fourColumns .sub {
width: ;
top: 60px;/*kp*/
}
*:first-child+html #globalNav li.fourColumns .sub {
width: ;
top: 60px;/*kp*/
}
#globalNav li .pointer {
height: 24px;
width: 100%;
position: relative;
top: 47px;/*kp*/
left: 50%;
margin-left: -50%;
display: none;
z-index: 10000;
background: url('../Images_v4/Master/NavMenu.png') no-repeat center 5px;
font: 1px/1px monospace;
}
html.rtl #globalNav li .pointer {
left: auto;
right: 50%;
margin-left: 0;
margin-right: -50%;
}
* html #globalNav li .pointer {
top: 47px;/*kp*/
left: -50%;
width: 100%;
height: 21px;
float: left;
margin: 0 -10px 0 -13px;
padding: 0;
background: url('../Images_v4/Master/NavMenu.png') no-repeat center 5px;
}
* html.rtl #globalNav li .pointer {
left: auto;
right: -50%;
float: right;
}
*:first-child+html #globalNav li .pointer {
top: 47px;/*kp*/
float: left;
width: 100%;
height: 13px;
left: -50%;
margin: 0 -50%;
padding: 11px 0 0 100%;
}
#globalNav li:hover .pointer {
display: block;
-webkit-animation-name: fadein;
-webkit-animation-duration: .3s;
-webkit-animation-iteration-count: once;
-webkit-animation-direction: normal;
-webkit-animation-timing-function: ease-out;
}
#googleInput {
border: 0;
background: 0;
}
#awesomeHeader,
.awesomeHeader {
font-size: 14px;
line-height: 21px;
font-family: Arial,Helvetica,sans-serif;
color: #666666;
-webkit-font-smoothing: antialiased;
height: 115px;
margin: 0 0 0 0;
background: #787878;
position: relative;
z-index: 9999;
}
body.business #awesomeHeader,
body.business .awesomeHeader {
background: #787878;
margin: 0;
}
body.business #secure a, body.business #secure p {
/*text-shadow: 0 1px 0 #4B465A;*/
}
#awesomeHeader #header,
.awesomeHeader #header {
width: 940px;
margin: 0 auto;
position: relative;
}
.NavIcon_Administration
{
background-image: url(../Images_v4/Master/NavIcon_Administration.png);
background-repeat: no-repeat;
background-position:center center;
float: left;
margin: 0px;
padding: 0px;
height: 45px;
width: 35px;
}
.NavIcon_Operation
{
background-image: url(../Images_v4/Master/NavIcon_Operation.png);
background-repeat: no-repeat;
background-position:center center;
float: left;
margin: 0px;
padding: 0px;
height: 45px;
width: 35px;
}
.NavIcon_Reports
{
background-image: url(../Images_v4/Master/NavIcon_Reports.png);
background-repeat: no-repeat;
background-position:center center;
float: left;
margin: 0px;
padding: 0px;
height: 45px;
width: 35px;
}
.NavIcon_Settings
{
background-image: url(../Images_v4/Master/NavIcon_Settings.png);
background-repeat: no-repeat;
background-position:center center;
float: left;
margin: 0px;
padding: 0px;
height: 45px;
width: 35px;
}
#globalNav nav ul li:hover
{
/*background: transparent url('../Images_v4/Master/NavMenu.png') no-repeat -300px -88px;*/
}
#globalNav nav ul li a:hover
{
color:Black;
}
#globalNav nav ul li
{
padding-left:10px;
padding-right:10px;
}
.Main_Nav
{
width: 600px;
height:73px;
float: right;
min-width:400px;
margin: 0px;
padding:10px 5px 0px 20px;
background-color:blue;
background-repeat:no-repeat;
background-position:0px 10px;
}