我有一个3级下拉菜单。我试图实现的是使子菜单和子子菜单的高度相同。这两个菜单应该有相同的高度,无论在每列项目(子菜单和子子菜单)。
下面是我使用的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>
下面是我想要实现的示例屏幕截图。
先谢了。
3条答案
按热度按时间js5cn81o1#
为了解决你的问题,我使用了jquery,因为我想不出一个纯粹的CSS解决方案,所以这只是一个可能的方法。
在我的解决方案中,对于每一个第一级
<li>
,我创建了一个循环,以获得其中最高的<ul>
,并将结果作为该<li>
中每个<ul>
的高度。这是脚本(另请参阅:Use jQuery/CSS to find the tallest of all elements):
在您的CSS中,我使用
visibility:visible & hidden
来获取<ul>
高度(删除您的display:none & block
)。这是所有正在运行的代码。希望对您有所帮助。:)
x一个一个一个一个x一个一个二个一个x一个一个三个一个
n6lpvg4x2#
如果你重组你的html是最好的。
添加了
.dropdown
类,以更容易定位。这是你想要的吗?
https://jsfiddle.net/q1m0kany/2/
nue99wik3#
你可以在一个容器中添加所有这些列吗?容器从两列开始。当新的悬停列扩展时,它也会水平扩展另一列。就像lowes导航菜单一样。请访问https://www.lowes.com/