title: Dropdown menu getting hidden by images
body: <p>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.</p>
  
  <p>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?</p>
  
  <p>HTML:</p>
  
  <pre><code>                &lt;!--header --&gt;                   
                  &lt;div class="headerHolder"&gt;
                      &lt;div class="menuHolder"&gt;
                          &lt;nav class="menu"&gt;
                              &lt;ul id="menu"&gt; 
                                  &lt;li&gt;
                                     &lt;div class="extHold"&gt;
                                          &lt;span class="whDiv"&gt;&lt;/span&gt;
                                          &lt;span class="overMarker"&gt;&lt;/span&gt;
                                     &lt;/div&gt;
                                     &lt;a href="#!/pageHome"&gt;
                                          &lt;div class="textHold"&gt;
                                              &lt;div class="mText"&gt;home&lt;/div&gt;
                                          &lt;/div&gt;
                                     &lt;/a&gt;
                                  &lt;/li&gt;
                                  &lt;li class="with_ul"&gt;
                                      &lt;div class="extHold"&gt;
                                          &lt;span class="whDiv"&gt;&lt;/span&gt;
                                          &lt;span class="overMarker"&gt;&lt;/span&gt;
                                      &lt;/div&gt;
                                      &lt;a href="#!/pageAbout"&gt;
                                          &lt;div class="textHold"&gt;
                                              &lt;div class="mText"&gt;About Us&lt;/div&gt;
                                          &lt;/div&gt;    
                                      &lt;/a&gt;
                                      &lt;ul class="submenu_1"&gt;
                                         &lt;li class="padTop"&gt;&lt;a href="#!/pageProfile"&gt;profile&lt;/a&gt;&lt;/li&gt;
                                         &lt;li&gt;&lt;a href="#!/pageStaff"&gt;staff&lt;/a&gt;&lt;/li&gt;
                                         &lt;li class="padBot bgNone"&gt;&lt;a href="#!/pageMore"&gt;news&lt;/a&gt;
                                              &lt;ul class="submenu_2"&gt;
                                                 &lt;li class="padTop"&gt;&lt;a href="#!/pageMore"&gt;fresh&lt;/a&gt;&lt;/li&gt;
                                                 &lt;li class="padBot bgNone"&gt;&lt;a href="#!/pageMore"&gt;archive&lt;/a&gt;&lt;/li&gt;
                                              &lt;/ul&gt;
                                         &lt;/li&gt;
                                      &lt;/ul&gt;
                                  &lt;/li&gt;
                                  &lt;li&gt;
                                      &lt;div class="extHold"&gt;
                                          &lt;span class="whDiv"&gt;&lt;/span&gt;
                                          &lt;span class="overMarker"&gt;&lt;/span&gt;
                                      &lt;/div&gt;
                                      &lt;a href="#!/pageStudents"&gt;
                                          &lt;div class="textHold"&gt;
                                              &lt;div class="mText"&gt;students&lt;/div&gt;
                                          &lt;/div&gt;    
                                      &lt;/a&gt; 
                                      &lt;ul class="submenu_1"&gt;
                                         &lt;li class="padTop"&gt;&lt;a href="#!/pagePowerSchool"&gt;Power School&lt;/a&gt;&lt;/li&gt;
                                         &lt;li&gt;&lt;a href="#!/pageTranscript"&gt;Transcript&lt;/a&gt;&lt;/li&gt;
                                         &lt;li&gt;&lt;a href="#!/pageCounselor"&gt;Counselor&lt;/a&gt;
                                         &lt;li&gt;&lt;a href="#!/pageStudentResources"&gt;Resources&lt;/a&gt;
                                         &lt;li&gt;&lt;a href="#!/pageHandbook"&gt;Handbook&lt;/a&gt;
                                         &lt;li&gt;&lt;a href="#!/pageUniform"&gt;Uniform Policy&lt;/a&gt;
                                         &lt;li&gt;&lt;a href="#!/pageClubs"&gt;Clubs&lt;/a&gt;
                                         &lt;li&gt;&lt;a href="#!/pageYouTube"&gt;You Tube&lt;/a&gt;
                                         &lt;li&gt;&lt;a href="#!/pageSeniorProjects"&gt;Senior Proj&lt;/a&gt;&lt;/li&gt;
                                      &lt;/ul&gt;
                                  &lt;/li&gt;
                                  &lt;li&gt;
                                      &lt;div class="extHold"&gt;
                                          &lt;span class="whDiv"&gt;&lt;/span&gt;
                                          &lt;span class="overMarker"&gt;&lt;/span&gt;
                                      &lt;/div&gt;
                                      &lt;a href="#!/pageParents"&gt;
                                          &lt;div class="textHold"&gt;
                                              &lt;div class="mText"&gt;parents&lt;/div&gt;
                                          &lt;/div&gt;
                                      &lt;/a&gt;
                                      &lt;ul class="submenu_1"&gt;                              
                                          &lt;li class="padTop"&gt;&lt;a href="#!/pagePowerSchool"&gt;Power School&lt;/a&gt;&lt;/li&gt;
                                          &lt;li&gt;&lt;a href="#!/pageApplyOnline"&gt;Apply Online&lt;/a&gt;&lt;/li&gt;
                                          &lt;li&gt;&lt;a href="#!/pageApplyMail"&gt;Apply Mail&lt;/a&gt;
                                          &lt;li&gt;&lt;a href="#!/pageParentResources"&gt;Resources&lt;/a&gt;
                                          &lt;li&gt;&lt;a href="#!/pageBoard"&gt;Board&lt;/a&gt;
                                          &lt;li&gt;&lt;a href="#!/pagePTO"&gt;PTO&lt;/a&gt;
                                          &lt;li&gt;&lt;a href="#!/pagePolicies"&gt;Policies&lt;/a&gt;
                                              &lt;ul class="submenu_2"&gt;
                                                  &lt;li class="padTop"&gt;&lt;a href="#!/pageAttendance"&gt;Attendance&lt;/a&gt;&lt;/li&gt;
                                                  &lt;li class="padBot bgNone"&gt;&lt;a href="#!/pageWellness"&gt;Wellness&lt;/a&gt;&lt;/li&gt;
                                              &lt;/ul&gt;                                  
                                          &lt;li&gt;&lt;a href="#!/pageCounselor"&gt;Counselor&lt;/a&gt;&lt;/li&gt;
                                          &lt;li&gt;&lt;a href="#!/pageSupplies"&gt;Supplies&lt;/a&gt;
                                          &lt;li&gt;&lt;a href="#!/pageTranscript"&gt;Transcript&lt;/a&gt;
                                          &lt;li&gt;&lt;a href="#!/pageSeniorProjects"&gt;Senior Proj&lt;/a&gt;
                                          &lt;li&gt;&lt;a href="#!/pageNewsletters"&gt;Newsletter&lt;/a&gt;
                                          &lt;li&gt;&lt;a href="#!/pageYouTube"&gt;You Tube&lt;/a&gt;
                                      &lt;/ul&gt;
                                  &lt;/li&gt;
                                  &lt;li&gt;
                                      &lt;div class="extHold"&gt;
                                          &lt;span class="whDiv"&gt;&lt;/span&gt;
                                          &lt;span class="overMarker"&gt;&lt;/span&gt;
                                      &lt;/div&gt;
                                      &lt;a href="#!/pageCalendar"&gt;
                                          &lt;div class="textHold"&gt;
                                              &lt;div class="mText"&gt;Calendars&lt;/div&gt;
                                          &lt;/div&gt;
                                      &lt;/a&gt;
                                      &lt;ul class="submenu_1"&gt;
                                         &lt;li class="padTop"&gt;&lt;a href="#!/pageBusCalendar"&gt;Bus&lt;/a&gt;&lt;/li&gt;
                                         &lt;li&gt;&lt;a href="#!/pageLunchMenu"&gt;Lunch&lt;/a&gt;&lt;/li&gt;
                                         &lt;li&gt;&lt;a href="#!/pageSchoolCalendar"&gt;School&lt;/a&gt;&lt;/li&gt;
                                      &lt;/ul&gt;                               
                                  &lt;/li&gt;
                                  &lt;li&gt;
                                      &lt;div class="extHold"&gt;
                                          &lt;span class="whDiv"&gt;&lt;/span&gt;
                                          &lt;span class="overMarker"&gt;&lt;/span&gt;
                                      &lt;/div&gt;
                                      &lt;a href="#!/pageCommunity"&gt;
                                          &lt;div class="textHold"&gt;
                                              &lt;div class="mText"&gt;Community&lt;/div&gt;
                                          &lt;/div&gt;
                                      &lt;/a&gt;
                                      &lt;ul class="submenu_1"&gt;                              
                                         &lt;li class="padTop"&gt;&lt;a href="#!/pageMore"&gt;Awards&lt;/a&gt;&lt;/li&gt;
                                         &lt;li&gt;&lt;a href="#!/pageYouTube"&gt;You Tube&lt;/a&gt;&lt;/li&gt;
                                         &lt;li&gt;&lt;a href="#!/pageCharter"&gt;Charter&lt;/a&gt;
                                         &lt;li&gt;&lt;a href="#!/pageApplyOnline"&gt;Apply Online&lt;/a&gt;
                                         &lt;li&gt;&lt;a href="#!/pageApplyMail"&gt;Apply Mail&lt;/a&gt;
                                         &lt;li&gt;&lt;a href="#!/pageBoard"&gt;Board&lt;/a&gt;
                                         &lt;li&gt;&lt;a href="#!/pageFinancials"&gt;Financials&lt;/a&gt;
                                         &lt;li&gt;&lt;a href="#!/pagePublicCharter"&gt;Public vs Charter&lt;/a&gt;&lt;/li&gt;
                                         &lt;li&gt;&lt;a href="#!/pageASN"&gt;Art School Network&lt;/a&gt;
                                         &lt;li&gt;&lt;a href="#!/pageEmployment"&gt;Employment&lt;/a&gt;
                                         &lt;li&gt;&lt;a href="#!/pageReportCard"&gt;Report Card&lt;/a&gt;
                                         &lt;li&gt;&lt;a href="#!/pageSeniorProjects"&gt;Senior Proj&lt;/a&gt;
                                         &lt;li&gt;&lt;a href="#!/pageNewsletters"&gt;Newsletters&lt;/a&gt;
                                      &lt;/ul&gt;
                                   &lt;/li&gt;
                                   &lt;li&gt;
                                      &lt;div class="extHold"&gt;
                                          &lt;span class="whDiv"&gt;&lt;/span&gt;
                                          &lt;span class="overMarker"&gt;&lt;/span&gt;
                                      &lt;/div&gt;
                                      &lt;a href="#!/pageContact"&gt;
                                          &lt;div class="textHold"&gt;
                                              &lt;div class="mText"&gt;Contact us&lt;/div&gt;
                                          &lt;/div&gt;    
                                      &lt;/a&gt;
                                   &lt;/li&gt;
                              &lt;/ul&gt;
                          &lt;/nav&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
              &lt;!--header end--&gt; 
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>    /* Left &amp; 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 &gt; li{position:relative; color: white; display: inline-block; text-align: center;margin-left: 
      10px;}
      #menu &gt; li &gt; a{display: block; position: relative;height: 60px;text-align: center;padding: 0 12px;}
      #menu &gt; li &gt; a:hover{text-decoration:none;}
      #menu &gt; li.active &gt; 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 &gt; a, .submenu_1 li.sfHover &gt; 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 &gt; a, .submenu_1 li.sfHover &gt; 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 &gt; ul{width: 820px; height: 520px; z-index: 4;display: inline-block;margin-top: 68px;}
      #content &gt; ul &gt; 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 &gt; a{width:135px; height: 135px; display: inline-block; position: relative;margin: 24px;text-
      align: center;z-index: 2;}
      .enterBtn &gt; 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 &gt; li{width: 100%; position: relative;display: inline-block;padding-bottom: 10px;}
      ._list1 &gt; li &gt; figure{float: left; }
      ._list1 &gt; li &gt; figure img{float: left; margin-right: 18px;}
      ._list1 &gt; li  figcaption{float: left; width: 205px;border-bottom: 1px solid #2e2c39;margin-top: 6px;}
      ._list1 &gt; li  figcaption p{padding-bottom: 25px;}
      ._list2{width: 100%;}
      ._list2 &gt; li{width: 100%; position: relative;display: inline-block;padding-bottom: 35px;}
      ._list2 &gt; li &gt; figure{float: left;}
      ._list2 &gt; li &gt; figure img{float: left; margin-right: 18px;}
      ._list2 &gt; li  figcaption{float: left; width: 278px;margin-top: -6px;}
      ._list3{width: 220px;}
      ._list3 &gt; li{position: relative; width: 100%;}
      ._list4{width: 770px;}
      ._list4 &gt; li{width: 240px; height: 144px; position: relative;display: inline-block;float: left;margin-
      right: 20px;margin-bottom: 20px;}
      ._list4 &gt; li &gt; figure{float: left; display: inline-block;}
      ._list4 &gt; li &gt; figure a{width: 240px; height: 144px; display: inline-block;}
      ._list4 .magRnone{margin-right: 0px;}
      ._list5{width: 100%; position: relative;margin-top: 4px;}
      ._list5 &gt; li{width: 100%; position: relative; background: url(../images/marker.png) 0% 50% no-
      repeat;margin-bottom: 10px;}
      ._list5 &gt; li &gt; a{color: #000; text-transform: uppercase; margin-left: 24px;font-weight: bold;font-size: 
      11px;}
      ._list5 &gt; li &gt; 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 ====================== */
  </code></pre>