2

我创建了一个子菜单，它隐藏在使用 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-->
4

1 回答 1

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

于 2013-12-27T18:35:31.187 回答