Question

试图弄清楚是否有办法让我的子菜单显示在其后面的一个父div中。父div具有设计元素的背景，我希望子菜单看起来是从后面出来的。

这是我正在使用的HTML代码：

    <div id="header">
    <div id="headerbluebox"><div id="navigationcurves"><div class="page-wrap">
        <h1><a href="softrol/">Softrol</a></h1>
        <div class="menu-main-menu-container">
        <ul id="menu-main-menu" class="menu">
            <li id="menu-item-498" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children menu-item-498"><a href="#">Solutions</a>
                <ul class="sub-menu">
                    <li><a href="softrol/solutions/softrol-total-plant-solutions/">Softrol Total Plant Management</a></li>
                    <li><a href="softrol/solutions/chemical-systems/">Chemical Systems</a></li>
                    <li><a href="softrol/solutions/rail-systems/">Rail Systems</a></li>
                    <li><a href="softrol/solutions/productivity-solutions/">Productivity Solutions</a></li>
                    <li><a href="softrol/solutions/garment-sort-systems/">Garment Sort Systems</a></li>
                    <li><a href="softrol/solutions/soil-sort-systems/">Soil Sort Systems</a></li>
                    <li><a href="softrol/solutions/management-info-systems/">Management / Info Systems</a></li>
                </ul>
            </li>
            <li id="menu-item-499" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children menu-item-499"><a href="#">About Us</a>
                <ul class="sub-menu">
                    <li><a href="softrol/about-us/company-history/">Our History</a></li>
                    <li><a href="softrol/about-us/management-bios/">Management Profiles</a></li>
                    <li><a href="softrol/about-us/corporate-brochure/">Corporate Brochure</a></li>
                </ul>
            </li>
            <li id="menu-item-500" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children menu-item-500"><a href="#">Support</a>
                <ul class="sub-menu">
                    <li><a href="softrol/support/sales-contacts/">Sales Contacts</a></li>
                    <li><a href="softrol/support/service-contacts/">Service Contacts</a></li>
                    <li><a href="softrol/support/faqs/">FAQ&#8217;s</a></li>
                </ul>
            </li>
            <li id="menu-item-501" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children menu-item-501"><a href="#">News</a>
                <ul class="sub-menu">
                    <li><a href="softrol/category/press-release/">Press Release</a></li>
                    <li><a href="softrol/category/blog/">Blog</a></li>
                    <li><a href="softrol/news/media-resources/">Media Resources</a></li>
                </ul>
            </li>
        </ul>
        </div>
</div></div></div>

这里是CSS

    #headerbluebox { background-image:url(images/softrol-header-background.jpg); background-position: center top; background-repeat: no-repeat; overflow: visible; background-color: #002255;  }
#headerbluebox #navigationcurves { background-image: url(images/softrol-menuheader.png); background-position: center top; background-repeat: no-repeat; overflow: visible; height: 175px; position: relative; z-index:600;   }
#header { margin: 0 0 35px 0;  }
#header h1 a { width: 170px; height: 100px; font-size: 0px; display: block; }

/* TOP TIER MENU */
.menu-main-menu-container { padding: 0px; display: block; float: right; margin: -65px 30px 0px 100px; width: 600px; position: relative; height: 65px; margin-bottom: 0px; }
.menu-main-menu-container ul#menu-main-menu { padding: 0px; list-style: none; display: block; float: right; margin: 0px; width: 644px; position: relative; height: 60px; margin-right: -25px;  }
.menu-main-menu-container ul#menu-main-menu li { display: inline-block; }
.menu-main-menu-container ul#menu-main-menu li a { display: inline-block; width: 160px; height: 65px; float: left; font-size: 0px; margin: 0 -3px 0 0; }

/* DROP DOWN MENUS */
ul#menu-main-menu li ul.sub-menu { position: absolute; z-index:-500; display: none; list-style: none; margin-top: 65px; margin-left: -150px; width: 200px; padding-top: 20px; opacity:0.9; background-color: #333; }
ul#menu-main-menu ul.sub-menu li{ float:none; width: 150px; }
ul#menu-main-menu ul.sub-menu li a { display: block; padding: 10px 10px; background-color: #333; border-bottom: 1px solid #333; color: #fff; font-size: 14px; text-transform: uppercase; text-align: center; width: 180px; height: auto; }
ul#menu-main-menu li:hover ul { display: inline-block; }
ul#menu-main-menu li:hover a{ }
ul#menu-main-menu li:hover ul a{ text-decoration:none; }
ul#menu-main-menu li:hover ul li a:hover{ background:#666; color: #fff; opacity: 1; }
/*--- END MENUS ---*/

只需要在“navigationcurves”div后面获得“子菜单”ul。这是一个链接，可以看到它的实际效果：http://www.brandondhunt.com/softrol

任何帮助将不胜感激!!谢谢！

Answer 1

详细说明我的评论......

我不敢

（对不起）

这与堆叠上下文/顺序有关，因为子元素不能堆叠在父元素下面，因为它们是相对于它们排序的。

More from MDN

在堆叠上下文中，子元素按照堆叠方式堆叠先前解释的相同规则。重要的是，z-index值为它的子堆叠上下文只对这个父项有意义。堆垛上下文被原子地视为父级中的单个单元堆叠背景。

实现你想要的方法就是删除你想要放在后面的元素作为父元素，将它放在适当的位置（position:）然后给它一个低于z-index的元素。你希望在前面的元素（或在DOM中的第一个位置）

Answer 2

我认为您最好的选择是将每个列表放在其父列表项之外，以便它是兄弟姐妹。

<li id="menu-item-498" class="ontop">Solutions</li>
<ul class="sub-menu-498">
  <li><a href="softrol/solutions/chemical-systems/">Chemical Systems</a></li>
  ...
</ul>

即使您将鼠标悬停在使用CSS adjacent sibling selector的标题上，您也可以确保列表的样式已更改：

li#menu-item-498:hover + .sub-menu-498,
.sub-menu-498:hover {
  display:inline-block;
  ...

}

并确保除了悬停

外，子菜单不会显示

.sub-menu-498 {
  display:none;
}

最后确保菜单标题显示在顶部

.ontop {
   z-index:999;
}

希望有所帮助。

获取位于父div后面的子菜单

2 个答案:

我不敢