Bob
Reputation: 305
Dropdown menu getting hidden by images
I have a set of dropdown menus across the top of a web page. Below is text and some images. When I hover over the top of each menu the menu then expands below as expected but while it overlaps any text on the page it is hidden behind any images. I set the z-index to 9999 and the position is set to absolute. I found if I lower the opacity of the images to say 0.6 then the menu will overlap it.
So one solution would be to detect when the menu is being hovered over and then in JavaScript or JQuery temporarily reduce the opacity of the rest of the page until the cursor moves off the menu. If so I'm not sure how to do that but is that the best approach?
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 ====================== */
Upvotes: 0
Views: 344
Answers (2)
Bob
Reputation: 305
Well I found a solution of sorts. I wrote a JQuery script that reduces the opacity of the background to 0.6 whenever the mouse is over the pulldown menu then returns it to 1.0 when the mouse moves away. This enables the menu to sit on top of the background. Using z-index did not work and the position attribute was already set to absolute. So not sure why those things did not work but at least this is another tool to keep in your bag of tricks.
Upvotes: 0
Brodie
Reputation: 8717
Did you try setting a position relative to the menu? z-index depends on a position attribute other than static (which is the default)
Upvotes: 1
Related Questions
- Css : Image overlap the Dropdown menu issue?
- Dropdown menu not overlapping lower elements
- HTML Drop down menu hidden by image
- Image behind drop down menu issue HTML CSS
- Dropdown overlapping other nav items
- Why is my image floating above my dropdown menu
- Dropdown Javascript menus overlapping
- Overlapping dropdown menu
- Dropdown Menu goes underneath image
- Dropdown menu collide with an image