Javascript 使子菜单和子菜单的高度相同
我有一个三级下拉菜单。我试图实现的是使子菜单和子菜单的高度相同。无论每列(子菜单和子菜单)中的项目如何,两个菜单的高度都应相同 这是我正在使用的HTML和CSS代码Javascript 使子菜单和子菜单的高度相同,javascript,jquery,html,css,drop-down-menu,Javascript,Jquery,Html,Css,Drop Down Menu,我有一个三级下拉菜单。我试图实现的是使子菜单和子菜单的高度相同。无论每列(子菜单和子菜单)中的项目如何,两个菜单的高度都应相同 这是我正在使用的HTML和CSS代码 html{ 字体系列:无衬线; -webkit文本大小调整:100%; -ms文本大小调整:100%; } * { -webkit框大小:边框框; -moz框大小:边框框; 框大小:边框框; } *:之前, *:之后{ -webkit框大小:边框框; -moz框大小:边框框; 框大小:边框框; } * { 边际:0px; 填充:0
html{
字体系列:无衬线;
-webkit文本大小调整:100%;
-ms文本大小调整:100%;
}
* {
-webkit框大小:边框框;
-moz框大小:边框框;
框大小:边框框;
}
*:之前,
*:之后{
-webkit框大小:边框框;
-moz框大小:边框框;
框大小:边框框;
}
* {
边际:0px;
填充:0px;
}
#主要{
最大宽度:1000px;
保证金:0自动;
}
#菜单:之后{
内容:“;
明确:两者皆有;
显示:块;
}
#菜单{
背景色:#000;
}
#菜单ul{
列表样式:无;
位置:相对位置;
浮动:左;
保证金:0;
填充:0
}
#菜单ul a{
显示:块;
颜色:231F20;
字体大小:12px;
}
#菜单ulli{
浮动:左;
保证金:0;
填充:0
}
#菜单ul li.current{
背景:#ddd
}
#菜单{
显示:无;
位置:绝对位置;
最高:100%;
左:0;
背景:#fff;
边框:1px实心#4598cc;
填充:20px 0px;
z指数:5;
}
#菜单ul-li{
浮动:无;
宽度:200px;
填充物:5px10px;
}
#菜单{
颜色:#4598cc;
显示:块;
填充:5px0;
字体样式:14px;
字体系列:FFMarkStdBook;
}
#菜单{
排名:0;
左:100%;
身高:100%;
}
#菜单ul li:悬停>ul{
显示:块
}
#菜单>保险单>保险单{
浮动:左;
右边距:47px;
位置:相对位置;
}
#菜单>ul>li:最后一个孩子{
右边距:0px;
}
#菜单>保险单>保险单>保险单>保险单{
颜色:#fff;
文本转换:大写;
字体大小:14px;
填充:10px;
文字装饰:无;
}
#菜单>保险商实验室>保险商实验室>保险商实验室{
颜色:#4598cc;
字体大小:14px;
文本转换:大写;
字体大小:正常;
}
-
-
-
-
-
-
如果重新构造html,这是最好的选择
添加了.dropdown
类以使目标更容易确定
这是你想要的吗
-
-
-
-
-
-
html{
字体系列:无衬线;
-webkit文本大小调整:100%;
-ms文本大小调整:100%;
}
* {
-webkit框大小:边框框;
-moz框大小:边框框;
框大小:边框框;
}
*:之前,
*:之后{
-webkit框大小:边框框;
-moz框大小:边框框;
框大小:边框框;
}
* {
边际:0px;
填充:0px;
}
#主要{
最大宽度:1000px;
保证金:0自动;
}
#菜单:之后{
内容:“;
明确:两者皆有;
显示:块;
}
#菜单{
背景色:#000;
}
#菜单ul{
列表样式:无;
位置:相对位置;
保证金:0;
填充:0
}
#菜单ul a{
显示:块;
字体大小:12px;
文字装饰:无;
}
#菜单ulli{
保证金:0;
填充:0;
显示:块;
}
#菜单.下拉列表{
显示:无;
位置:绝对位置;
最高:100%;
左:0;
z指数:5;
}
#菜单。下拉列表{
宽度:200px;
显示:块;
背景颜色:灰色;
边框底部:1px纯黑;
}
#菜单.下拉菜单>li>a{
字体样式:14px;
填充物:5px;
颜色:白色;
字体系列:FFMarkStdBook;
}
#菜单,下拉菜单,下拉菜单{
排名:0;
左:100%;
身高:100%;
}
#菜单:悬停>。下拉菜单{
显示:块
}
#菜单>保险单>保险单{
浮动:左;
右边距:47px;
位置:相对位置;
}
#菜单>ul>li:最后一个孩子{
右边距:0px;
}
#菜单>保险单>保险单>保险单>保险单{
颜色:#fff;
文本转换:大写;
字体大小:14px;
填充:10px;
文字装饰:无;
}
#菜单>保险商实验室>保险商实验室>保险商实验室{
颜色:#4598cc;
字体大小:14px;
文本转换:大写;
字体大小:正常;
}
为了解决您的问题,我使用了jquery,因为我想不出一个纯粹的CSS解决方案。所以这只是一种可能的方法
在我的解决方案中,对于每一个第一级,我创建了一个循环,以获得其中最高的
,并将结果作为该中每个
的高度
这是脚本(另请参见此:):
在CSS中,我使用了visibility:visible&hidden
<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;
}
$("#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);
});