我有一个带有3个级别的下拉菜单。我想要实现的是使SubMenu和Sub-SubMenu的高度相同。不论每列(子菜单和子子菜单)中的项目如何,两个菜单的高度均应相同。
这是我正在使用的HTML和CSS代码。
html {
font-family: sans-serif;
-webkit-text-size-adjust: 100%;
-ms-text-size-adjust: 100%;
}
* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
*:before,
*:after {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
* {
margin: 0px;
padding: 0px;
}
#main {
max-width: 1000px;
margin: 0 auto;
}
#menu:after {
content: "";
clear: both;
display: block;
}
#menu {
background-color: #000;
}
#menu ul {
list-style: none;
position: relative;
float: left;
margin: 0;
padding: 0
}
#menu ul a {
display: block;
color: #231F20;
font-size: 12px;
}
#menu ul li {
float: left;
margin: 0;
padding: 0
}
#menu ul li.current {
background: #ddd
}
#menu ul ul {
display: none;
position: absolute;
top: 100%;
left: 0;
background: #fff;
border: 1px solid #4598cc;
padding: 20px 0px;
z-index: 5;
}
#menu ul ul li {
float: none;
width: 200px;
padding: 5px 10px;
}
#menu ul ul a {
color: #4598cc;
display: block;
padding: 5px 0;
font-style: 14px;
font-family: FFMarkStdBook;
}
#menu ul ul ul {
top: 0;
left: 100%;
height: 100%;
}
#menu ul li:hover>ul {
display: block
}
#menu>ul>li {
float: left;
margin-right: 47px;
position: relative;
}
#menu>ul>li:last-child {
margin-right: 0px;
}
#menu>ul>li>a {
color: #fff;
text-transform: uppercase;
font-size: 14px;
padding: 10px;
text-decoration: none;
}
#menu>ul>li>ul b {
color: #4598cc;
font-size: 14px;
text-transform: uppercase;
font-weight: normal;
}
<div id="main">
<nav id="menu">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Services</a>
<ul>
<li><a href="#">Link One ></a>
<ul>
<li><a href="#">Child Link One</a></li>
<li><a href="#">Child Link One</a></li>
<li><a href="#">Child Link One</a></li>
<li><a href="#">Child Link One</a></li>
<li><a href="#">Child Link One</a></li>
<li><a href="#">Child Link One</a></li>
</ul>
</li>
<li><a href="#">Link One ></a>
<ul>
<li><a href="#">Child Link One</a></li>
<li><a href="#">Child Link One</a></li>
</ul>
</li>
<li><a href="#">Link One ></a>
<ul>
<li><a href="#">Child Link One</a></li>
<li><a href="#">Child Link One</a></li>
<li><a href="#">Child Link One</a></li>
<li><a href="#">Child Link One</a></li>
<li><a href="#">Child Link One</a></li>
</ul>
</li>
</ul>
</li>
<li><a href="#">Projects</a>
<ul>
<li><a href="#"> Link One</a>
<ul>
<li><a href="#">Child Link One</a></li>
<li><a href="#">Child Link One</a></li>
<li><a href="#">Child Link One</a></li>
<li><a href="#">Child Link One</a></li>
<li><a href="#">Child Link One</a></li>
</ul>
</li>
<li><a href="#"> Link One</a></li>
<li><a href="#"> Link One</a></li>
</ul>
</li>
<li><a href="#">Blog</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
</div>
这是我要实现的示例屏幕截图。 https://lodash.com/docs/4.17.10#get
先谢谢了。
答案 0 :(得分:2)
为了解决您的问题,我使用了jquery,因为我无法想到一个纯粹的CSS解决方案。所以这只是一种可能的方式。
在我的解决方案中,对于第一个级别<li>
,我创建了一个循环以获取最高的<ul>
,并将结果作为该{{1 }}。
这是脚本(另请参见:Use jQuery/CSS to find the tallest of all elements):
<ul>
在您的CSS中,我使用<li>
来获取$("#menu > ul > li").each(function(){
var maxHeight = 0;
var myUl=$("ul", $(this));
myUl.each(function(){
maxHeight = maxHeight > $(this).height() ? maxHeight : $(this).height();
});
myUl.height(maxHeight);
});
的高度(移走visibility:visible & hidden
)。
这是所有正在执行的代码。希望能帮助到你。 :)
<ul>
display:none & block
$("#menu > ul > li").each(function(){
var maxHeight = 0;
var myUl=$("ul", $(this));
myUl.each(function(){
maxHeight = maxHeight > $(this).height() ? maxHeight : $(this).height();
});
myUl.height(maxHeight);
});
答案 1 :(得分:0)
如果您重组HTML,那是最好的选择。
.dropdown
类已添加,以更易于定位。
这是您想要的吗?
https://jsfiddle.net/q1m0kany/2/
<div id="main">
<nav id="menu">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Services</a>
<ul class="dropdown">
<li><a href="#">Link One ></a>
<ul class="dropdown">
<li><a href="#">Child Link One</a></li>
<li><a href="#">Child Link One</a></li>
<li><a href="#">Child Link One</a></li>
<li><a href="#">Child Link One</a></li>
<li><a href="#">Child Link One</a></li>
<li><a href="#">Child Link One</a></li>
</ul>
</li>
<li><a href="#">Link One ></a>
<ul class="dropdown">
<li><a href="#">Child Link One</a></li>
<li><a href="#">Child Link One</a></li>
</ul>
</li>
<li><a href="#">Link One ></a>
<ul class="dropdown">
<li><a href="#">Child Link One</a></li>
<li><a href="#">Child Link One</a></li>
<li><a href="#">Child Link One</a></li>
<li><a href="#">Child Link One</a></li>
<li><a href="#">Child Link One</a></li>
</ul>
</li>
</ul>
</li>
<li><a href="#">Projects</a>
<ul class="dropdown">
<li><a href="#"> Link One</a>
<ul class="dropdown">
<li><a href="#">Child Link One</a></li>
<li><a href="#">Child Link One</a></li>
<li><a href="#">Child Link One</a></li>
<li><a href="#">Child Link One</a></li>
<li><a href="#">Child Link One</a></li>
</ul>
</li>
<li><a href="#"> Link One</a></li>
<li><a href="#"> Link One</a></li>
</ul>
</li>
<li><a href="#">Blog</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
</div>
html {
font-family: sans-serif;
-webkit-text-size-adjust: 100%;
-ms-text-size-adjust: 100%;
}
* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
*:before,
*:after {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
* {
margin: 0px;
padding: 0px;
}
#main {
max-width: 1000px;
margin: 0 auto;
}
#menu:after {
content: "";
clear: both;
display: block;
}
#menu {
background-color: #000;
}
#menu ul {
list-style: none;
position: relative;
margin: 0;
padding: 0
}
#menu ul a {
display: block;
font-size: 12px;
text-decoration: none;
}
#menu ul li {
margin: 0;
padding: 0;
display: block;
}
#menu .dropdown {
display: none;
position: absolute;
top: 100%;
left: 0;
z-index: 5;
}
#menu .dropdown li {
width: 200px;
display: block;
background-color: gray;
border-bottom: 1px solid black;
}
#menu .dropdown > li > a {
font-style: 14px;
padding: 5px;
color: white;
font-family: FFMarkStdBook;
}
#menu .dropdown .dropdown {
top: 0;
left: 100%;
height: 100%;
}
#menu ul li:hover > .dropdown {
display: block
}
#menu>ul>li {
float: left;
margin-right: 47px;
position: relative;
}
#menu>ul>li:last-child {
margin-right: 0px;
}
#menu>ul>li>a {
color: #fff;
text-transform: uppercase;
font-size: 14px;
padding: 10px;
text-decoration: none;
}
#menu>ul>li>ul b {
color: #4598cc;
font-size: 14px;
text-transform: uppercase;
font-weight: normal;
}