Question

我知道它是最愚蠢的问题!!但是对于子级别<ul>的高度进行查询，我没有得到子标记的完整高度。

<div class="nav megaMenu">
            <ul>
                <li><a href="#">Home</a></li>
                <li><a href="#">About Us</a>
                    <ul class="sub-nav" >
                        <li class="sub-nav-col" ><a href="#">About us A</a>
                            <ul class="sub-inner">
                                <li><a href="#">About us A 1</a></li>
                                <li><a href="#">About us A 2</a></li>
                                <li><a href="#">About us A 3</a></li>
                            </ul>
                        </li>
                    </ul>
                </li>
                <li><a href="#">Clients</a>
                    <ul>
                        <li><a href="#">Links A</a>
                            <ul>
                                <li><a href="#">Links C 1</a></li>

                            </ul>
                        </li>
                        <li><a href="#">Links B</a>
                            <ul>
                                <li><a href="#">Links B 1</a></li>
                                <li><a href="#">Links B 2</a></li>

                            </ul>
                        </li>

                    </ul>
                </li>
                <li><a href="#">Contact Us</a>
                    <ul>
                        <li><a href="#">level-2</a></li>
                        <li><a href="#">level-2</a></li>
                        <li><a href="#">level-2</a></li>
                    </ul>
                </li>
            </ul>
        </div>

CSS：

.nav {
 float: left;
 width: 100%;
}
.nav ul{
display:table;
margin: 0 auto;
    max-width: 1024px;
    width: 100%;

}
.nav > ul > li.level1{
   position:static; 
}
.nav ul li {
 display: table-cell;
 transition: all 0.5s ease 0s;
 position: relative;
}
.nav li a {
 transition: all 0.5s ease 0s;
 display:block;
}
.nav > ul > li > a {
 background: #f5f5f5;
 border-right: 1px solid #000;
 box-sizing: border-box;
 display: block;
 padding: 10px;
}
.nav > ul > li:last-child > a {
 border-right: none;
}
 .nav {
 position: relative;
}
.nav.megaMenu > ul > li > ul{
 left: 0;
 position: absolute;
 right: 0;
 width: 100%;
 z-index:9;
 height:100%;
    background:red;
}
.nav.megaMenu > ul {
position: relative;
margin: 0 auto;
max-width: 1024px;
}
.nav.megaMenu li.level2 ul li {
width:100%;
}
.nav.megaMenu > ul li:hover ul {
visibility:visible;
}

.nav > ul > li ul {
 visibility:hidden;
 z-index: 9;
 position: absolute;
}
.nav > ul > li.level1 ul li a {
 background: rgba(0, 0, 0, 0.2);
 border-bottom: 1px solid #000;
 box-sizing: border-box;
 color: #fff;
 display: block;
 margin-right: 1px;
 padding: 10px;
}

你可以获得@ here的工作演示。在这里，当您将鼠标悬停在菜单上时，您会发现红色背景颜色为<ul>，其中也包含子子项，但<ul>的高度未涵盖完整层次结构的高度。请帮帮我！

Answer 1

删除子ul上的绝对父级，因为父级已经处于绝对位置。

.nav > ul > li ul {
 visibility:hidden;
 z-index: 9;
}

演示：fiddle

儿童等级<ul>身高问题

1 个答案: