CODEWITHSUNDEEP
javascriptjqueryhtmlcss
WebBeginner
WebBeginner

Reputation: 33

Elements of navigation doesn't stretch to their height of parent

I have got a small problem with my navigation. I have something like this http://jsfiddle.net/WebBeginner/S6UNd/ and I want to have first_level_menu elements with the same height like the tallest element of this level menu (in this case element with 3 lines of text). I tried to set 100% height for each of these elements but it doesn't work :(. I have no idea how to solve this problem, but I know if I done that, the opened sub menu will be placed dirrectly bellow my navigation and ... this is my goal. Thanks for any help and I am very sorry for my English :)

        <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>

Upvotes: 3

Views: 57

Answers (3)

Maurizio Battaghini
Maurizio Battaghini

Reputation: 478

CSS Solution:

.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;
}

Upvotes: 2

Jimmy Knoot
Jimmy Knoot

Reputation: 2388

Javascript solution:

$(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/

Or you can set the height of the li elements to 100% and specifically set the height of the parent ul element to the maxheight of the li elements. The reason your height 100% doesn't work is because the ul element does not have a height specified.

So this also works with just li elements set to 100% height:

$(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/

Upvotes: 2

Bhushan Kawadkar
Bhushan Kawadkar

Reputation: 28513

You can try below jquery : iterate all first level li and get tallest li height. Assign tallest height to all 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

Upvotes: 0

Related Questions