隱藏在JS幻燈片後面的下拉菜單

我創建了一個子菜單，它隱藏在使用JavaScript的橫幅後面，懸停效果對子菜單項也不起作用。隱藏在JS幻燈片後面的下拉菜單

我希望子菜單顯示在橫幅上。

這裏是我的代碼：

<!--menu_wrap--> 
<div class="menu_wrap"> 
    <ul class="menu"> 
     <ul class="mainMenus"> 
      <li class="home" onclick='showSubMenu("sm_item1")'><a href="#">Yuave for</a> 

       <li> 
        <img src="images/divider.png" width="2" height="50" /> 
       </li> 
       <ul class="subMenus" id="sm_item1" style="float:left; width:235px; margin-left:302px; margin-top:92px"> 
        <div id="top_triangle" class="top_triangle1" style="height:10px; width:200px;"> 
         <div class="chat-bubble-arrow-border1"></div> 
         <div class="chat-bubble-arrow1"></div> 
        </div> 
        <div id="cont" style="float:left; width:235px; height:220px; background:#E7EDED; border-top-right-radius:8px; border-top-left-radius:8px; border-bottom-left-radius:8px; color: #37A0C0; font-family: 'Carme'; font-size: 18px; text-decoration: none;" class="hover"> 
         <div id="btop" style="float:left; width:235px; height:11px;"></div> 
         <div id="item1" style="float:left; width:235px; height:33px;" onMouseOver="show('div1')" onMouseOut="hide('div1')"> 
          <div id="tx1" style="float:left; margin-left:0px; width:228px; height:26px;" onMouseOver="this.style.background='#F1F5F6'" onMouseOut="this.style.background='#E7EDED'"> 
           <div id="txtchng" style="float:left; margin-left:20px;"> <a href="#" style="text-decoration:none; color:#37A0C0"> 
               Online Sellers 
              </a> 

           </div> 
          </div> 
          </a> 
         </div> 
         <div id="item1" style="float:left; width:235px; height:33px" onMouseOver="show('div1')" onMouseOut="hide('div1')"> 
          <div id="tx1" style="float:left; margin-left:0px; width:228px; height:26px;" onMouseOver="this.style.background='#F1F5F6'" onMouseOut="this.style.background='#E7EDED'"> 
           <div id="txtchng" style="float:left; margin-left:20px;"> <a href="#" style="text-decoration:none; color:#37A0C0"> 
               Charities and non-profit 
              </a> 

           </div> 
          </div> 
          </a> 
         </div> 
         <div id="item1" style="float:left; width:235px; height:33px" onMouseOver="show('div1')" onMouseOut="hide('div1')"> 
          <div id="tx1" style="float:left; margin-left:0px; width:228px; height:26px;" onMouseOver="this.style.background='#F1F5F6'" onMouseOut="this.style.background='#E7EDED'"> 
           <div id="txtchng" style="float:left; margin-left:20px;"> <a href="#" style="text-decoration:none; color:#37A0C0"> 
               Events and Classes 
              </a> 

           </div> 
          </div> 
          </a> 
         </div> 
         <div id="item1" style="float:left; width:235px; height:33px" onMouseOver="show('div1')" onMouseOut="hide('div1')"> 
          <div id="tx1" style="float:left; margin-left:0px; width:228px; height:26px;" onMouseOver="this.style.background='#F1F5F6'" onMouseOut="this.style.background='#E7EDED'"> 
           <div id="txtchng" style="float:left; margin-left:20px;"> <a href="#" style="text-decoration:none; color:#37A0C0"> 
               Tech Stars 
              </a> 

           </div> 
          </div> 
          </a> 
         </div> 
         <div id="item1" style="float:left; width:235px; height:33px" onMouseOver="show('div1')" onMouseOut="hide('div1')"> 
          <div id="tx1" style="float:left; margin-left:0px; width:228px; height:26px;" onMouseOver="this.style.background='#F1F5F6'" onMouseOut="this.style.background='#E7EDED'"> 
           <div id="txtchng" style="float:left; margin-left:20px;"> <a href="#" style="text-decoration:none; color:#37A0C0"> 
               Health and Beauty 
              </a> 

           </div> 
          </div> 
          </a> 
         </div> 
         <div id="item1" style="float:left; width:235px; height:33px" onMouseOver="show('div1')" onMouseOut="hide('div1')"> 
          <div id="tx1" style="float:left; margin-left:0px; width:228px; height:26px;" onMouseOver="this.style.background='#F1F5F6'" onMouseOut="this.style.background='#E7EDED'"> 
           <div id="txtchng" style="float:left; margin-left:20px;"> <a href="#" style="text-decoration:none; color:#37A0C0"> 
               Services and Trade 
              </a> 

           </div> 
          </div> 
          </a> 
         </div> 
         <div id="bbot" style="float:left; width:235px; height:11px;"></div> 
        </div> 
        <div id="div1" style="float:left; width:213px; height:220px; background:#F1F5F6; margin-left:226px; margin-top:-220px; border-top-right-radius:8px; border-bottom-right-radius:8px; font-family: 'Carme'; "> 
         <div id="xbtop" style="float:left; width:213px; height:5px;"></div> 
         <div id="image_box" style="float:left; width:200px; height:120px; margin-left:13px"> 
          <div id="mboximg" style="float:left; margin-left: 50px; margin-top: 12px;"> 
           <img src="images/GNOC_orange.png" /> 
          </div> 
         </div> 
         <div id="bhead" style="float:left; width:200px; height:25px; color:#37A0C0; font-size: 16px; margin-left:13px; font-weight:bold">Perfect for:</div> 
         <div id="btxts" style="float:left; width:200px; height:65px; color:#666; margin-left:13px; font-size:12px">Amazon Sellers</br>Online Shop</br>Facebook Sellers</br>eBay Sellers</br> 
         </div> 
         <div id="xbbotom" style="float:left; width:213px; height:5px"></div> 
        </div> 
       </ul> 
      </li> 
     </ul> 
     <li> <a <?php if($base_path=='howit_works.php'){ ?> class="selective" <?php } ?> href="<?php echo $base_path.'/howit_works.php'; ?>">How it works</a> 
     </li> 
     <li> 
      <img src="images/divider.png" width="2" height="50" /> 
     </li> 
     <li> <a <?php if($base_path=='satisfy_customer.php'){ ?> class="selective" <?php } ?> href="<?php echo $base_path.'/satisfy_customer.php'; ?>">Happy customers</a> 
     </li> 
     <li> 
      <img src="images/divider.png" width="2" height="50" /> 
     </li> 
     <li> <a <?php if($base_path=='register_page.php'){ ?> class="selective" <?php } ?> href="<?php echo $base_path.'/register_page.php'; ?>">Get started </a> 
     </li> 
     <li> 
      <img src="images/divider.png" width="2" height="50" /> 
     </li> 
     <li class="contact" style="padding-right:0px;"> <a <?php if($base_path=='contact_us.php'){ ?> class="selective" <?php } ?> href="<?php echo $base_path.'/contact_us.php'; ?>">Contact us</a> 
     </li> 
    </ul> 
</div> 
<!--menu_wrap--> 
</div> 
<!--content_row--> 
<!--content_row--> 
<div class="content_row"> 
    <div id="container"> 
     <div id="example"> 
      <div id="slides"> 
       <div class="slides_container"> 
        <div class="slide"> 
         <div class="div_left_slid"> 
          <div class="content"> 
           <h4>Customer Interaction for all businesses</h4> 

           <h3>Automate call handling. Improve Customer Service. Increase productivity</h3> 

          </div> 
         </div> 
         <div class="div_right_slid"> 
          <img style="float:right" src="images/IP_telephone_gray.png" height="157" /> 
         </div> 
        </div> 
        <div class="slide"> 
         <div class="div_left_slid"> 
          <div class="content"> 
           <h4>Improve your bottom line</h4> 

           <h3>Project big company Image. Manage existing customers. Attract new customers</h3> 

          </div> 
         </div> 
         <div class="div_right_slid"> 
          <img src="images/Growth_1_orange_header.png" height="175" /> 
         </div> 
        </div> 
        <div class="slide"> 
         <div class="div_left_slid"> 
          <div class="content"> 
           <h4>Get started in minutes</h4> 

           <h3>Easy to use self-service interface. Accessible from computer, tables or mobile. No software download. No activation delays</h3> 

          </div> 
         </div> 
         <div class="div_right_slid"> 
          <img src="images/jongl.png" height="175" /> 
         </div> 
        </div> 
       </div> <a href="#" class="prev"><img src="images/arrow_left.png" width="24" height="43" alt="Arrow Prev"></a> 
    <a href="#" class="next"><img src="images/arrow_right.png" width="24" height="43" alt="Arrow Next"></a> 

      </div> 
     </div> 
    </div> 
</div> 
<!--content_row-->

來源

2013-05-27 Abbasi

您是否嘗試過設置'z-index' CSS屬性？ –

我知道這是一個老問題，但在這裏是一個答案：

.menu { 
position: relative; /* if you haven't already set this element to position absolute/relative, leave this intact, otherwise erase this line*/ 
z-index: 9999; /* sets stacking order above almost any element on page*/ 
}

屬性看這裏會的z-index：http://www.w3.org/wiki/CSS/Properties/z-index

來源

2013-12-27 18:35:31

回答

相關問題