我在网页顶部有一组下拉菜单。下面是文字和一些图片。当我将鼠标悬停在每个菜单的顶部时，菜单会按预期在下方展开，但当它与页面上的任何文本重叠时，它隐藏在任何图像后面。我将 z-index 设置为 9999，位置设置为绝对。我发现如果我将图像的不透明度降低到 0.6，那么菜单将与它重叠。
因此，一种解决方案是检测菜单何时被悬停，然后在 JavaScript 或 JQuery 中暂时降低页面其余部分的不透明度，直到光标移出菜单。如果是这样，我不确定该怎么做，但这是最好的方法吗？
HTML:
<!--header -->
<div class="headerHolder">
<div class="menuHolder">
<nav class="menu">
<ul id="menu">
<li>
<div class="extHold">
<span class="whDiv"></span>
<span class="overMarker"></span>
</div>
<a href="#!/pageHome">
<div class="textHold">
<div class="mText">home</div>
</div>
</a>
</li>
<li class="with_ul">
<div class="extHold">
<span class="whDiv"></span>
<span class="overMarker"></span>
</div>
<a href="#!/pageAbout">
<div class="textHold">
<div class="mText">About Us</div>
</div>
</a>
<ul class="submenu_1">
<li class="padTop"><a href="#!/pageProfile">profile</a></li>
<li><a href="#!/pageStaff">staff</a></li>
<li class="padBot bgNone"><a href="#!/pageMore">news</a>
<ul class="submenu_2">
<li class="padTop"><a href="#!/pageMore">fresh</a></li>
<li class="padBot bgNone"><a href="#!/pageMore">archive</a></li>
</ul>
</li>
</ul>
</li>
<li>
<div class="extHold">
<span class="whDiv"></span>
<span class="overMarker"></span>
</div>
<a href="#!/pageStudents">
<div class="textHold">
<div class="mText">students</div>
</div>
</a>
<ul class="submenu_1">
<li class="padTop"><a href="#!/pagePowerSchool">Power School</a></li>
<li><a href="#!/pageTranscript">Transcript</a></li>
<li><a href="#!/pageCounselor">Counselor</a>
<li><a href="#!/pageStudentResources">Resources</a>
<li><a href="#!/pageHandbook">Handbook</a>
<li><a href="#!/pageUniform">Uniform Policy</a>
<li><a href="#!/pageClubs">Clubs</a>
<li><a href="#!/pageYouTube">You Tube</a>
<li><a href="#!/pageSeniorProjects">Senior Proj</a></li>
</ul>
</li>
<li>
<div class="extHold">
<span class="whDiv"></span>
<span class="overMarker"></span>
</div>
<a href="#!/pageParents">
<div class="textHold">
<div class="mText">parents</div>
</div>
</a>
<ul class="submenu_1">
<li class="padTop"><a href="#!/pagePowerSchool">Power School</a></li>
<li><a href="#!/pageApplyOnline">Apply Online</a></li>
<li><a href="#!/pageApplyMail">Apply Mail</a>
<li><a href="#!/pageParentResources">Resources</a>
<li><a href="#!/pageBoard">Board</a>
<li><a href="#!/pagePTO">PTO</a>
<li><a href="#!/pagePolicies">Policies</a>
<ul class="submenu_2">
<li class="padTop"><a href="#!/pageAttendance">Attendance</a></li>
<li class="padBot bgNone"><a href="#!/pageWellness">Wellness</a></li>
</ul>
<li><a href="#!/pageCounselor">Counselor</a></li>
<li><a href="#!/pageSupplies">Supplies</a>
<li><a href="#!/pageTranscript">Transcript</a>
<li><a href="#!/pageSeniorProjects">Senior Proj</a>
<li><a href="#!/pageNewsletters">Newsletter</a>
<li><a href="#!/pageYouTube">You Tube</a>
</ul>
</li>
<li>
<div class="extHold">
<span class="whDiv"></span>
<span class="overMarker"></span>
</div>
<a href="#!/pageCalendar">
<div class="textHold">
<div class="mText">Calendars</div>
</div>
</a>
<ul class="submenu_1">
<li class="padTop"><a href="#!/pageBusCalendar">Bus</a></li>
<li><a href="#!/pageLunchMenu">Lunch</a></li>
<li><a href="#!/pageSchoolCalendar">School</a></li>
</ul>
</li>
<li>
<div class="extHold">
<span class="whDiv"></span>
<span class="overMarker"></span>
</div>
<a href="#!/pageCommunity">
<div class="textHold">
<div class="mText">Community</div>
</div>
</a>
<ul class="submenu_1">
<li class="padTop"><a href="#!/pageMore">Awards</a></li>
<li><a href="#!/pageYouTube">You Tube</a></li>
<li><a href="#!/pageCharter">Charter</a>
<li><a href="#!/pageApplyOnline">Apply Online</a>
<li><a href="#!/pageApplyMail">Apply Mail</a>
<li><a href="#!/pageBoard">Board</a>
<li><a href="#!/pageFinancials">Financials</a>
<li><a href="#!/pagePublicCharter">Public vs Charter</a></li>
<li><a href="#!/pageASN">Art School Network</a>
<li><a href="#!/pageEmployment">Employment</a>
<li><a href="#!/pageReportCard">Report Card</a>
<li><a href="#!/pageSeniorProjects">Senior Proj</a>
<li><a href="#!/pageNewsletters">Newsletters</a>
</ul>
</li>
<li>
<div class="extHold">
<span class="whDiv"></span>
<span class="overMarker"></span>
</div>
<a href="#!/pageContact">
<div class="textHold">
<div class="mText">Contact us</div>
</div>
</a>
</li>
</ul>
</nav>
</div>
</div>
<!--header end-->
CSS:
/* Left & Right alignment */
.left { float:left; }
.right { float:right; }
.wrapper {width:100%; overflow:hidden; }
.glob{width:100%; height:100%; position:absolute; overflow:hidden; }
body{font-family:Arial, sans-serif; color:#FFFFFF; background: #FFFFFF; line-height:20px; min-
width:1010px; min-height:100%; position:absolute; width:100%; height:100%; overflow:hidden; }
/* Global Structure ========================================================= */
.main {margin:0px auto 0 auto; width: 820px; z-index:2; height:100%; }
.main .bio {margin:0px auto 0 auto; width: 1020px; z-index:2; height:100%; }
.page_spinner{ position:fixed; background:url(../images/loader.gif) 50% 50% no-repeat #FFFFFF; z-
index:99; width:100%; height:100%; top:0; left:0}
#glob{position:relative; overflow:hidden; z-index:1; }
/* ============================= main layout ================================ */
a{ color:#FF9900; text-decoration:none; outline:none; font-size: 12px; }
a:hover{ text-decoration:underline}
h1{float:left;}
h2{font-family: 'PT Sans Narrow', sans-serif; color:#FFF; font-size:26px; line-height: 26px; width:100%;
padding-bottom: 25px;text-transform: uppercase;font-weight: normal;text-shadow: 0px 0px 6px white;}
p{font-family: Tahoma; padding-bottom: 20px; font-size: 11px; color: #000000; line-height: 19px;text-
transform: uppercase;}
.undLineOff{text-decoration:none; }
.textLowerCase{text-transform:lowercase}
.textUpperCase{text-transform:uppercase}
.center{ padding:0; width:100%; position: relative; }
.alignLeft{text-align:left; }
.alignCenter{text-align:center; }
.alignRight{text-align:right; }
.relative{position: relative;}
/* ============================= header ===================================== */
header{position: absolute; z-index: 3; display: inline-block; top: 320px;right: 176px;}
#logo{display:inline-block; background: url(../images/IACS_logo.png) 0 0 no-repeat; width: 320px;
height: 88px;}
#logo:hover{text-decoration:none; }
.logoHolder{ display:inline-block; left: 10px; position: absolute;} /*position: relative;} */
.headerHolder{position: relative; width: 830px; z-index: 2; margin: 0 auto;display: inline-block;}
.menu{position:relative; z-index:1; display: block; right: -1000px;}
.menuHolder{ float: right; display:inline-block; position: relative; width: 100%; z-index: 3; left: 0;
margin-top: 140px;}
#menu {z-index:3; position:relative; display: inline-block;float: right;}
#menu > li{position:relative; color: white; display: inline-block; text-align: center;margin-left:
10px;}
#menu > li > a{display: block; position: relative;height: 60px;text-align: center;padding: 0 12px;}
#menu > li > a:hover{text-decoration:none;}
#menu > li.active > a{text-decoration:none;}
.submenu_1 {position:absolute; z-index:9999; top: 60px; left: 0px; display: block; background:
#cc99ff;width: 100%;}
.submenu_1 li {position:relative; display:inline-block; width: 100%;height: 12px;float: left;padding:
8px 0; background: url(../images/extra3.png) 50% 100% no-repeat;}
.submenu_1 a {font-family: 'Courier', sans-serif; font-size: 8px; color:#414141; display:inline-block;
line-height: 20px; padding: 0px 20px;font-weight: bold;text-transform: uppercase;}
.submenu_1 li:hover > a, .submenu_1 li.sfHover > a{text-decoration:none; color:#2e3469; }
.submenu_1 .padTop{padding-top: 15px;}
.submenu_1 .padBot{padding-bottom: 15px;}
.submenu_1 .bgNone{background: none;}
.submenu_2 {position:absolute; z-index:2; top: 0px; left: 83px; display: block; background: #ee9c02;
width: 100%;}
.submenu_2 li {position:relative; display:inline-block; width: 100%;height: 16px;float: left;padding:
9px 0; background: url(../images/extra4.png) 50% 100% no-repeat;}
.submenu_2 a {font-family: 'Courier', sans-serif; font-size: 14px; color:#000; display:inline-block;
line-height: 15px; padding: 0px 15px;font-weight: normal;text-transform: uppercase;}
.submenu_2 li:hover > a, .submenu_1 li.sfHover > a{text-decoration:none; color:#414141;}
.submenu_2 .padTop{padding-top: 15px;}
.submenu_2 .padBot{padding-bottom: 15px;}
.submenu_2 .bgNone{background: none;}
.textHold{position: relative; display: inline-block; height: 60px;overflow: hidden;}
.mText{font-family: 'Homenaje', sans-serif; line-height: 60px; color: #FFF; font-size: 18px; position:
relative;text-transform: uppercase;z-index: 1;}
.mTextOver{font-family: 'Homenaje', sans-serif; line-height: 60px; color: #FFF; font-size: 18px;
position: absolute;text-transform: uppercase;z-index: 9999;}
.extHold{ height: 14px; position: absolute; display: block; top: -11px;z-index: 2;text-align: center;
width: 100%; overflow: hidden;}
.overMarker{background:url(../images/extra2.png) 50% 50% no-repeat; width: 100%; height: 4px; display:
inline-block; position: relative;}
.whDiv{background: #fff; width: 100%; height: 3px; bottom: 0;position: absolute;}
.area{position: absolute; top: 0; left: 0; width: 100%;height: 60px;background:
url(../images/pixel.png);
z-index: 2;}
/* ============================= content ====================== */
#bodyArea {opacity: 0.6;}
#content{position:relative; z-index: 1; width: 100%; margin: 0 auto; display: block;}
#content > ul{width: 820px; height: 520px; z-index: 4;display: inline-block;margin-top: 68px;}
#content > ul > li{width: 100%; display:block; position:absolute; height: 520px;}
.box{width: 100%; overflow: hidden; position: relative; height: 520px; padding: 0px 0px;}
.underline{text-decoration:underline; }
.space1{display:inline-block; width: 75px; }
.color1{color: #c2c2c2;}
.color2{color: #000;}
.color3 a{color: #000;}
.padBot1{padding-bottom: 25px;}
.padBot2{padding-bottom: 15px;}
.padBot3{padding-bottom: 21px;}
.padBot4{padding-bottom: 20px;}
.padBot5{padding-bottom: 15px;}
.padBot6{padding-bottom: 20px;}
.padBot7{padding-bottom: 26px;}
.padRight1{padding-right: 36px;}
.padRight2{padding-right: 32px;}
.padRight3{padding-right: 40px;}
.padRight4{padding-right: 25px;}
.padLeft1 {padding-left: 5px; }
.magLeft1{margin-left: 38px;}
.magLeft2{margin-left: 37px;}
.magLeft3{margin-left: 40px;}
.magLeft4{margin-left: 5px;}
.bordRight{border-right: 1px solid #2b2b2b;}
.text1{font-size: 60px; line-height: 52px;}
.enterBtn{ position: absolute; width: 184px; height: 184px; display: inline-block;left: 318px; top:
185px;z-index: 3;}
.enterBtn > a{width:135px; height: 135px; display: inline-block; position: relative;margin: 24px;text-
align: center;z-index: 2;}
.enterBtn > a span{font-family: 'Homenaje', sans-serif; font-size: 20px; color: #2f34fc;text-transform:
uppercase;text-align: center;display: inline-block;margin-top: 50px;text-shadow: 0px 0px 5px #2D33FC;}
.outBtn{background:url(../images/enterBtn.png); width: 184px;height: 184px;position: absolute;top: 0;}
.overBtn{background:url(../images/enterBtnOver.png); width: 184px;height: 184px;position: absolute;top:
0;}
.partic{background:url(../images/extra1.png); position: absolute; width: 204px; height: 240px;top:
-23px;left: -33px;z-index: 1;}
.more{font-family: 'Homenaje', sans-serif; color: #fff; font-size: 18px;
background:url(../images/moreSprites1.png);padding: 9px 18px;text-transform: uppercase;line-height:
18px;position: relative;}
.more:hover{text-decoration: none;}
.track{position:absolute; top: 50px; left: 385px; width:15px; height:335px;
background:url(../images/track.png) 0 0 no-repeat;}
.shuttle{position:relative; width: 13px; height:106px; background: url(../images/shuttle.png) 50% 0% no-
repeat;display: inline-block;z-index: 1;}
.scroll2{width: 240px; height: 320px; margin-bottom: 0px;}
.track2{position:absolute; top: 50px; left: 240px; width:15px; height:335px;
background:url(../images/track.png) 0 0 no-repeat;}
.shuttle2{position:relative; width: 13px; height:106px; background: url(../images/shuttle.png) 50% 0%
no-repeat;display: inline-block;z-index: 1;}
.scroll3{width: 770px; height: 325px; margin-bottom: 0px;}
.track3{position:absolute; top: 50px; left: 800px; width:15px; height:335px;
background:url(../images/track.png) 0 0 no-repeat;}
.shuttle3{position:relative; width: 13px; height:106px; background: url(../images/shuttle.png) 50% 0%
no-repeat;display: inline-block;z-index: 1;}
._link1{font-family: 'Homenaje', sans-serif; color: #23224b; font-size: 15px;}
._link2{color: #fff; text-transform: uppercase;font-size: 11px;}
.bgPic{position: absolute; width: 1520px; height: 636px; display: inline-block;left: -590px;top: 20px;}
.bgPic img{position: absolute; width: 1520px; height: 636px; display: inline-block;left: 0;top: 0;}
._list1{width: 355px;}
._list1 > li{width: 100%; position: relative;display: inline-block;padding-bottom: 10px;}
._list1 > li > figure{float: left; }
._list1 > li > figure img{float: left; margin-right: 18px;}
._list1 > li figcaption{float: left; width: 205px;border-bottom: 1px solid #2e2c39;margin-top: 6px;}
._list1 > li figcaption p{padding-bottom: 25px;}
._list2{width: 100%;}
._list2 > li{width: 100%; position: relative;display: inline-block;padding-bottom: 35px;}
._list2 > li > figure{float: left;}
._list2 > li > figure img{float: left; margin-right: 18px;}
._list2 > li figcaption{float: left; width: 278px;margin-top: -6px;}
._list3{width: 220px;}
._list3 > li{position: relative; width: 100%;}
._list4{width: 770px;}
._list4 > li{width: 240px; height: 144px; position: relative;display: inline-block;float: left;margin-
right: 20px;margin-bottom: 20px;}
._list4 > li > figure{float: left; display: inline-block;}
._list4 > li > figure a{width: 240px; height: 144px; display: inline-block;}
._list4 .magRnone{margin-right: 0px;}
._list5{width: 100%; position: relative;margin-top: 4px;}
._list5 > li{width: 100%; position: relative; background: url(../images/marker.png) 0% 50% no-
repeat;margin-bottom: 10px;}
._list5 > li > a{color: #000; text-transform: uppercase; margin-left: 24px;font-weight: bold;font-size:
11px;}
._list5 > li > a:hover{text-transform: uppercase; text-decoration: none;}
.zoomSp{display:block; position:absolute; left:0; top:0; width: 240px; height: 144px; z-index:3;
background: url(../images/magnify.png) 50% 50% no-repeat; }
/* ============================= footer ====================== */
最佳答案
您是否尝试设置相对于菜单的位置？ z-index 取决于 static 以外的位置属性(这是默认值)
关于javascript - 下拉菜单被图像隐藏，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/13312473/