Here is a screen shot
i have a drop down list on my page.When i click on the drop down list it pops out and after that if i select on the Top Menu bar it extends as shown above unable to over ride the drop down list.
can any one throw some light on how to handle this issue.
jsfiddle Demo Link
when we click on the drop down list first(and dont select anything) and den hover on the report menu tab the drop down list overlaps the menu.Dats the issue.
Here is the html code 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>
And here is the CSS code
.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;
}
Perhaps using jQuery you can
This may be wrong, but I hope it communicates my intent.
Cheers
UPDATE:
The following will work in the fiddle; perhaps you can use something similar on your site:
http://jsfiddle.net/BTCBL/29/
UPDATE AGAIN:
This alternative uses fewer characters and leaves the Select visible while collapsing the options:
http://jsfiddle.net/BTCBL/33/