我创建了一个子菜单，它隐藏在使用JavaScript的横幅后面，悬停效果也不适用于子菜单项。
我希望子菜单显示在横幅上。
这是我的代码：
<!--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-->
答案 0 :(得分：0)
我知道这是一个较老的问题，但这是一个答案：
.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