将鼠标悬停在菜单上时，将焦点从下拉列表设置到窗口
Posted
技术标签:
【中文标题】将鼠标悬停在菜单上时，将焦点从下拉列表设置到窗口【英文标题】：Set focus from Drop down list to window on mouse hover on menu 【发布时间】：2012-11-03 22:09:25 【问题描述】：这是一个屏幕截图
我的页面上有一个下拉列表。当我单击下拉列表时，它会弹出，然后如果我在顶部菜单栏上选择它会扩展，如上所示，无法覆盖下拉列表。 任何人都可以说明如何处理这个问题。
编辑： 我刚刚创建了一个
jsfiddle Demo Link
，当我们首先单击下拉列表（并且不选择任何内容）并将鼠标悬停在报告菜单选项卡上时，下拉列表与菜单重叠。问题是。这里是html代码
<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;
【问题讨论】：
你的代码在哪里？我们需要查看 html 和 css。如果您使用jsfiddle.net 创建一个简化的问题示例，那将会更有帮助。 @tw16 更新问题并附上 jsfiddle 的链接，请查看 【参考方案1】：也许使用jQuery你可以
$('.fourColumns > a').mouseover(function()
$('select').blur();
;
这可能是错误的，但我希望它传达了我的意图。
干杯
更新： 以下将在小提琴中起作用；也许你可以在你的网站上使用类似的东西：
$('nav ul li').mouseover(function()
$('select').hide();
);
$('nav ul li').mouseout(function()
$('select').show();
);
http://jsfiddle.net/BTCBL/29/
再次更新： 此替代方案使用较少的字符，并在折叠选项时使 Select 可见：
$('nav ul li').mouseover(function()
$('select').hide().blur().show();
);
http://jsfiddle.net/BTCBL/33/
【讨论】：
你所说的fourColumns是什么意思> a.如果你能在jsfiddle中显示一些东西会很有帮助。 我的意思是任何带有“a”标签的元素，它是“fourColumns”类元素的子元素。但这不起作用，因为“报告”没有那个类。我将使用功能选项更新我的答案。【参考方案2】：您能否尝试将选择标记和表（其父项）的 z-index 设置为 0？我在这里没有看到选择标签的 z-index 属性。我不确定，但应该可以。
【讨论】：
尝试为 Drop down 设置低 z-index 但仍然无法正常工作以上是关于将鼠标悬停在菜单上时，将焦点从下拉列表设置到窗口的主要内容，如果未能解决你的问题，请参考以下文章
在鼠标悬停上打开菜单，在mouseleave上关闭菜单进行反应