将下拉菜单背景高度设置为绝对位置子菜单高度。

Question

我在页面上有一个多级导航。导航有三到四个级别。我想要一个全宽度的背景在下拉菜单，包括所有的子菜单。目前，我已经完成了一个层次，但是当单击第一级菜单时，第二级菜单出现时，背景在第三级菜单的情况下不动态地取高度。由于子菜单处于绝对位置，背景高度不会动态增加。有人能帮忙吗？我有一个参考网站。http://www.qsc.com/...但从现在开始我无法得到密码。我在准备我自己的密码。

​

 $(document).ready(function(){
	/* 
        // Show hide popover
        $(".dropdown").click(function(){
            $(this).find(".dropdown-menu").slideToggle("fast");
			
        });*/
		$('.dropdown-menu').hide();	
		
		$('.nav ul li > a').click(function() {
	$(this).parent().siblings().find('ul').slideUp(300);
	$(this).next('ul').stop(true, false, true).slideToggle(300);
	return false;
	
		});
	
	
});

/* not very relevant styling */
h1         { font-size: 20px; padding-top: 20px; }
.container { position: relative; margin: 20px auto 0 auto; width: 75%; }
.header    { background: #eee; }
.nav       { background: #ccc; }


/* relevant styling */

body { overflow-x: hidden; } /* trick from css-tricks comments */

/* FIRST LEVEL */

.nav > ul > li { 
    display: inline-block; 
    position: relative; 
    padding: 3px 10px 3px 0;
    z-index: 100;
	list-style:none;
}

.nav > ul > li > ul{
	width:100px}

.nav > ul > li > a{
	color:#939598;
	text-decoration:none;
}

/* Level 1 Drop Down */
.dropdown-menu > li {
	display: inline-block;
	vertical-align: top;
	 /* solve the 4 pixels spacing between list-items */
}
.dropdown-menu > li:first-child {
	margin-left: 0;
}

.dropdown-menu li {
	position: relative;
	list-style:none;
}

/* SECOND LEVEL ( background -color) of full width bg*/
.nav > ul > li > ul {
    position: absolute;
    left: 0;
    top: 100%;
    padding: 0 1000em; /* trick from css-tricks comments */
    margin: 0 -1000em; /* trick from css-tricks comments */
    z-index: 101;   
    background:#f2f2f2;
}





/*second level menu*/
.nav li ul li ul li:before {
    content: "";
    display: block;
    width: 1px;
    height: 100%;
    background-color: #7f7f7f;
    position: absolute;
    left: 0;
}


.nav > ul > li > ul > li {
    padding: 3px 0;
	color:#939598;
	text-decoration:none;


}

.nav > ul > li > ul > li > a{color:#939598;
	text-decoration:none;}
	
	.dropdown-menu li a{
	color:#939598;
	text-decoration:none;		
}

	.dropdown-menu li ul li{
		color:#939598;
	text-decoration:none;
		padding-left:5px;}
	
	
	
.dropdown-menu  > li > ul {
	text-align: left;
	display: none;
	color:#939598;
	text-decoration:none;
	position: absolute;
	top: 5px;
	left: 100%;	
	z-index: 999999; /* if you have YouTube iframes, is good to have a bigger z-index so the video can appear above the video */
}


.nav .drop { 
 
    width:100%!important; /* or: width:1200px!important;*/
    box-sizing:border-box;
}

/*Third level menu*/

.dropdown-menu  > li > ul > li > ul {
	text-align: left;
display: none;	
	position: absolute;
	left: 100%;
	top: 0;
	z-index: 9999999;
	color:#939598;
	text-decoration:none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="header">
    <!-- NAVIGATION -->    
    <div class="nav">
        <ul class="container">
            <li class="dropdown">
                <a class="drop" href="#">Products</a>
                <ul class="dropdown-menu">
                    <li><a href="#">Live Sound</a>
                    
                    <ul>
                    <li>Power AMplifiers</li>
                    <li>Loud Speakers</li>
                     <li>Power AMplifiers</li>
                    <li>Loud Speakers</li>
                     <li>Power AMplifiers</li>
                    <li>Loud Speakers</li>
                     <li>Power AMplifiers</li>
                    <li>Loud Speakers</li>
                    <li><a href="#">Touch Mix Mixers</a>
                    <ul class="dropdown-menu">
                    <li>GX Series</li>
                    <li>GXD Series</li>
                    <li>RMX Series</li>
                    <li>PLX2 Series</li>
                    <li>Powerlight three Series</li>
                    </ul>
                    
                    </li>
                    
                    </ul>
                    
                    </li>
                    <li><a href="#">System</a></li>
                    <li><a href="#">Cinema</a></li>
                   
                </ul>
            </li>
            <li class="dropdown">
                <a class="drop" href="#">Locations</a>
                <ul class="dropdown-menu">
                    <li><a href="#">Location A</a></li>
                    <li><a href="#">Location B</a></li>
                    <li><a href="#">Location C</a></li>
                </ul>
            </li>
            
            
            <li class="dropdown">
                <a class="drop" href="#">Locations</a>
                <ul class="dropdown-menu">
                    <li><a href="#">Location A</a></li>
                    <li><a href="#">Location B</a></li>
                    <li><a href="#">Location C</a></li>
                </ul>
            </li>
        
        </ul>
    </div>
    
</div>

<div class="content container">
    <p>All sorts of content</p>
    <p>All sorts of content</p>
    <p>All sorts of content</p>
    <p>All sorts of content</p>
    <p>All sorts of content</p>
    <p>All sorts of content</p>
</div>

​

Answer 1

你应该把background: #f2f2f2;交给ul。

在这里，我将菜单类添加到ul，下面的css添加到菜单类。

.menu{
 background: #f2f2f2;
}

检查工频。

希望能帮上忙。

编辑

就像给定的链接一样。当你打开的时候，你应该把ul定位到position:relative。如下所示：

JQuery：

$(this).next('.sub').toggleClass('menu');

CSS：

.menu{
 background: #f2f2f2;
 position: relative !important;
}

HTML：

<ul class="sub" >

您可以切换类menu，其中ul有类sub，这样就可以得到预期的结果。

更新Fiddle

您可以根据您的需求进行更改。