自动调整 <ul> 元素的高度以适应内容

Question

我想创建一个超级菜单，左侧列出项目，当鼠标悬停时右侧显示内容。我使用以下HTML和CSS代码。 HTML代码：

<ul class="mega-menu">
    <li class="has-mega-menu"><a href=""><span class="material-icons icon">laptop</span>digital</a>
        <ul class="mega-submenu">
            <li><a href="">phone</a></li>
            <li><a href="">mobile accessory</a></li>
            <li><a href="">computer</a></li>
            <li><a href="">computer</a></li>
            <li><a href="">computer</a></li>
            <li><a href="">computer</a></li>
            <li><a href="">computer</a></li>
            <li><a href="">computer</a></li>
            <li><a href="">computer</a></li>
            <li><a href="">computer</a></li>
            <li><a href="">computer</a></li>
            <li><a href="">computer</a></li>
            <li><a href="">computer</a></li>
            <li><a href="">computer</a></li>
            <li><a href="">computer</a></li>
            <li><a href="">computer</a></li>
            <li><a href="">computer</a></li>
            <li><a href="">computer</a></li>
            <li><a href="">computer</a></li>
            <li><a href="">computer</a></li>
            <li><a href="">computer</a></li>
            <li><a href="">computer</a></li>
        </ul>
    </li>
    <li class="has-mega-menu"><a href=""><span class="material-icons icon">home</span>home requirement</a>
        <ul class="mega-submenu">
            <li><a href="">tv</a></li>
            <li><a href="">Furniture</a></li>
            <li><a href="">Refrigerator</a></li>
        </ul>
    </li>
    <li class="has-mega-menu"><a href=""><span class="material-icons icon">work</span>clothes</a>
        <ul class="mega-submenu">
            <li><a href="">Shirt</a></li>
            <li><a href="">T-shirt</a></li>
            <li><a href="">jacket</a></li>
        </ul>
    </li>
</ul>

CSS 代码：

ul{
    list-style: none;
}
a{
    text-decoration: none;
    color: black;
}
.mega-menu{
    position: relative;
    padding: 0;
    background-color: #e5e7f7;
    /*border: 1px solid red;*/
}
.has-mega-menu>a{
    display: block;
    width: 250px;
    padding: 0.6rem 0.5rem;
    color: #3c3227;
    box-sizing: border-box;
}
.has-mega-menu>a .icon{
    vertical-align: -4px;
    margin-right: 4px;
}
.mega-submenu{
    display:none;
    position: absolute;
    top: 0;
    /*bottom: 0;*/
    min-height: 100%;
    left:250px;
    right: 0;
    background-color: #ecf1f7;
    /*border: 1px solid green;*/
}
.has-mega-menu:hover .mega-submenu{
    display: block;
}

我的问题在于当一个巨型子菜单有很多内容时，左侧项目的高度小于右侧内容。我应该添加哪些CSS和HTML代码来根据其内容设置巨型菜单的高度？

- Hossein

---

你能创建一个 JSFiddle 来展示它的外观吗？ - adelriosantiago

我创建了JSFiddle。你能帮我吗？https://jsfiddle.net/hossein_asadian/yzenm8u6/1/ - Hossein

Answer 1

这是您需要的吗？

$( "li.has-mega-menu" ).hover(
  function() {
    var menuhight = $( this ).find( ".mega-submenu" ).height();
    console.log(menuhight);
    $( "#menu" ).css( "min-height", menuhight+"px" );
  }, function() {
     $( "#menu" ).css( "min-height", "100%");
  }
);

ul{
    list-style: none;
}
a{
    text-decoration: none;
    color: black;
}

#menu {
background-color: #e5e7f7;
}
.mega-menu{
    position: relative;
    padding: 0;
    background-color: #e5e7f7;
    /*border: 1px solid red;*/

}
.has-mega-menu>a{
    display: block;
    width: 250px;
    padding: 0.6rem 0.5rem;
    color: #3c3227;
    box-sizing: border-box;
}
.has-mega-menu>a .icon{
    vertical-align: -4px;
    margin-right: 4px;
}
.mega-submenu{
    display:none;
    position: absolute;
    top: 0;
    /*bottom: 0;*/
    min-height: 100%;
    left:250px;
    right: 0;
    background-color: #ecf1f7;
    /*border: 1px solid green;*/
}
.has-mega-menu:hover .mega-submenu{
    display: block;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="menu">
<ul class="mega-menu">
    <li class="has-mega-menu"><a href=""><span class="material-icons icon">laptop</span>digital</a>
        <ul class="mega-submenu">
            <li><a href="">phone</a></li>
            <li><a href="">mobile accessory</a></li>
            <li><a href="">computer</a></li>
            <li><a href="">computer</a></li>
            <li><a href="">computer</a></li>
            <li><a href="">computer</a></li>
            <li><a href="">computer</a></li>
            <li><a href="">computer</a></li>
            <li><a href="">computer</a></li>
            <li><a href="">computer</a></li>
            <li><a href="">computer</a></li>
            <li><a href="">computer</a></li>
            <li><a href="">computer</a></li>
            <li><a href="">computer</a></li>
            <li><a href="">computer</a></li>
            <li><a href="">computer</a></li>
            <li><a href="">computer</a></li>
            <li><a href="">computer</a></li>
            <li><a href="">computer</a></li>
            <li><a href="">computer</a></li>
            <li><a href="">computer</a></li>
            <li><a href="">computer</a></li>
        </ul>
    </li>
    <li class="has-mega-menu"><a href=""><span class="material-icons icon">home</span>home requirement</a>
        <ul class="mega-submenu">
            <li><a href="">tv</a></li>
            <li><a href="">Furniture</a></li>
            <li><a href="">Refrigerator</a></li>
        </ul>
    </li>
    <li class="has-mega-menu"><a href=""><span class="material-icons icon">work</span>clothes</a>
        <ul class="mega-submenu">
            <li><a href="">Shirt</a></li>
            <li><a href="">T-shirt</a></li>
            <li><a href="">jacket</a></li>
        </ul>
    </li>
</ul>
</div>

$( "li.has-mega-menu" ).hover(
  function() {
    var menuhight = $( this ).find( ".mega-submenu" ).height();
    //console.log(menuhight);
    $( "#menu" ).css( "min-height", menuhight+"px" );
  }, function() {
     $( "#menu" ).css( "min-height", "100%");
  }
);

ul{
    list-style: none;
}
a{
    text-decoration: none;
    color: black;
}

#menu {
background-color: #e5e7f7;
}
.mega-menu{
    position: relative;
    padding: 0;
    background-color: #e5e7f7;
    /*border: 1px solid red;*/

}
.has-mega-menu>a{
    display: block;
    width: 250px;
    padding: 0.6rem 0.5rem;
    color: #3c3227;
    box-sizing: border-box;
}
.has-mega-menu>a .icon{
    vertical-align: -4px;
    margin-right: 4px;
}
.mega-submenu{
    display:none;
    position: absolute;
    top: 0;
    /*bottom: 0;*/
    min-height: 100%;
    left:250px;
    right: 0;
    background-color: #ecf1f7;
    /*border: 1px solid green;*/
}
.has-mega-menu:hover .mega-submenu{
    display: block;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="menu">
<ul class="mega-menu">
    <li class="has-mega-menu"><a href=""><span class="material-icons icon">laptop</span>digital</a>
        <ul class="mega-submenu">
            <li><a href="">phone</a></li>
            <li><a href="">mobile accessory</a></li>
            <li><a href="">computer</a></li>
            <li><a href="">computer</a></li>
            <li><a href="">computer</a></li>
            <li><a href="">computer</a></li>
            <li><a href="">computer</a></li>
            <li><a href="">computer</a></li>
            <li><a href="">computer</a></li>
            <li><a href="">computer</a></li>
            <li><a href="">computer</a></li>
            <li><a href="">computer</a></li>
            <li><a href="">computer</a></li>
            <li><a href="">computer</a></li>
            <li><a href="">computer</a></li>
            <li><a href="">computer</a></li>
            <li><a href="">computer</a></li>
            <li><a href="">computer</a></li>
            <li><a href="">computer</a></li>
            <li><a href="">computer</a></li>
            <li><a href="">computer</a></li>
            <li><a href="">computer</a></li>
        </ul>
    </li>
    <li class="has-mega-menu"><a href=""><span class="material-icons icon">home</span>home requirement</a>
        <ul class="mega-submenu">
            <li><a href="">tv</a></li>
            <li><a href="">Furniture</a></li>
            <li><a href="">Refrigerator</a></li>
        </ul>
    </li>
    <li class="has-mega-menu"><a href=""><span class="material-icons icon">work</span>clothes</a>
        <ul class="mega-submenu">
            <li><a href="">Shirt</a></li>
            <li><a href="">T-shirt</a></li>
            <li><a href="">jacket</a></li>
        </ul>
    </li>
</ul>
</div>

- ikiK

---

谢谢。这是正确的。有没有办法在不使用jQuery的情况下解决CSS问题？ - Hossein

@Hossein 我认为没有纯CSS的解决方法，因为它是基于内容高度动态计算的。我猜这可以用纯JS编写...如果我真的必须这样做，现在时间有点紧。 - ikiK

@Hossein，您可以在此处阅读有关如何使用CSS更改元素的内容，如果其他元素被悬停，但我认为您的标记不符合某些条件，因为我添加了外部div。此外，您需要具有固定的大小，以便类似于此类的东西能够正常工作。在我看来，JS是处理此类问题的最佳选择。https://dev59.com/rWw05IYBdhLWcg3w_Gqw https://dev59.com/kW855IYBdhLWcg3wKw5Y - ikiK