Question

我的导航问题很小。我有类似http://jsfiddle.net/WebBeginner/S6UNd/的东西，我希望first_level_menu元素具有相同的高度，就像这个级别菜单中最高的元素一样（在这种情况下，元素有3行文本）。我试图为每个元素设置100％的高度，但它不起作用:(。我不知道如何解决这个问题，但我知道如果我这样做了，打开的子菜单将直接放置在下面我的导航......这是我的目标。感谢您的帮助，我很抱歉我的英语：）

        <nav class="multi_level_menu clearfix">
        <ul class="menu_first_level ">
            <li>
                <a>level 1</a>
                <ul class="menu_second_level">
                    <li><a>level 2 item 1</a></li>
                    <li><a>level 2 item 2</a></li>
                    <li><a>level 2 item 3</a></li>
                </ul>
            </li>
            <li>
                <a>level 1<br />item 2</a>
            </li>
            <li>
                <a>level 1<br />item 3<br />3th line</a>
                <ul class="menu_second_level">
                    <li><a>level 2 item 4</a></li>
                    <li><a>level 2 item 5</a></li>
                </ul>
            </li>
        </ul>
    </nav>

    <script>

        .clearfix:after {

        content: ".";
                display: block;
                height: 0;
                visibility: hidden;
                clear: both;
                }


        .multi_level_menu {

        margin - top: 50px;
                background: aqua;
                }

        .multi_level_menu * {

        margin: 0;
                padding: 0;
                }

        .multi_level_menu li {

        list - style - type: none;
                position: relative;
                background - color: greenyellow;
                }

        .multi_level_menu li:hover > ul {

        display: block;
                }

        .multi_level_menu a {

        display: block;
                padding: 0.5em 2em;
                text - decoration: none;
                }

        .multi_level_menu a:hover {

        background - color: red;
                }

        .multi_level_menu li ul {

        display: none;
                position: absolute;
                }

        .multi_level_menu.menu_first_level {

        float: left;
                }

        .multi_level_menu.menu_first_level > li {

        float: left;
                /*  height: 100%;  doesn't work */
                }

        /*.multi_level_menu .menu_first_level > li > a {

         height: 100%; 
         } 
         doesn't work  */

        .multi_level_menu.menu_second_level {

        left: 0;
                top: 100 % ;
                }
    </script>

Answer 1

Javascript解决方案：

$(document).ready(function() {
    var maxHeight = 0;
    var lis = $('.menu_first_level').find('li');
    lis.each(function() {
        maxHeight = $(this).height() > maxHeight ? $(this).height() : maxHeight;    
    });
    lis.height(maxHeight);
});

JSFiddle：http://jsfiddle.net/S6UNd/2/

或者您可以将li元素的高度设置为100％，并专门将父ul元素的高度设置为li元素的最大高度。你的身高100％不起作用的原因是因为ul元素没有指定高度。

所以这也适用于设置为100％高度的li元素：

$(document).ready(function() {
    var maxHeight = 0;
    var lis = $('.menu_first_level').find('li');
    lis.each(function() {
        maxHeight = $(this).height() > maxHeight ? $(this).height() : maxHeight;    
    });
    $('.menu_first_level').height(maxHeight);
});

JSFiddle：http://jsfiddle.net/S6UNd/4/

Answer 2

CSS解决方案：

.multi_level_menu .menu_first_level {
    display: block;
    float: none;
}
.multi_level_menu .menu_first_level > li {
    display: table-cell;
    float: none;
    vertical-align:top;
}

Answer 3

您可以尝试以下jquery：迭代所有第一级li并获得最高li高度。为所有li分配最高的高度。

$(function(){
    var ht = 0;
    $('.menu_first_level li').each(function(){
        var htLi = $(this).height();
        if(htLi > ht)
            ht = htLi;
    });
    $('.menu_first_level li').css('height',ht+'px');
});

<强> Demo

导航元素不会延伸到父母的高度

3 个答案: