How to divide in 4 equal parts a li menu


Tags: html,css

Problem :

Having a menu with li and ul tags

<div class="menu">
    <ul class="hide-for-small">
        <li><a href="index.php">one</a> 
        </li>
        <li><a href="ac2.php">two</a>

            <ul>
                <li><a href="acc.php">1</a>
                </li>
                <li><a href="sal.php">2</a>
                </li>
                <li><a href="rec.php">3</a>
                </li>
                <li><a href="coss.php">4</a>
                </li>
            </ul>
        </li>
        <li><a href="ac3.php">three</a> 
        </li>
        <li><a href="ac4.php">four</a>

        </li>
    </ul>
</div>

I want to divide this menu in four equal parts, to do that I added

.menu {
     height:555px;
    margin-top:40px;

    width:980px;
    position:absolute;
    z-index:9999;
    top:0
}
.menu ul {
    display:inline;
    list-style:none;
    width:100%;
    position:relative;
    margin-top:40px
}
.menu li {
    float:left
}
.menu li a {
    font-family:Bariol, Arial;
    font-size:20px;
    text-transform:uppercase;
    color:#000
}
.menu li a:hover {
    opacity:.8
}
.menu li:nth-last-of-type(-n+3) {
    float:right;
    margin-left:38px
}
.menu li:nth-child(-n+3) {
    margin-right:38px
}
.menu ul li:hover ul {
    visibility:visible;
    opacity:1;
    transition-delay:0
}
.menu ul li ul {
    visibility:hidden;
    opacity:0;
    transition:visibility 0 linear .5s, opacity .5s linear;
    list-style:none;
    float:left;
    clear:both;
    position:absolute;
    margin:0;
    width:auto;
    z-index:999999
}
.menu ul li:hover ul {
    visibility:visible;
    opacity:1;
    transition-delay:0
}
.menu ul li ul li {
    float:left;
    float:none !important;
    position:relative;
    display:block;
    height:25px;
    margin:0 !important
}
.menu ul li ul li a {
    font-size:15px;
    display:block;
    margin:10px 0;
    background-color: #fff
}

and chaged width from 100% to 25%

.menu ul {
        display:inline;
        list-style:none;
        width:100%;
        position:relative;
        margin-top:40px
    }

But I am getting undesired result.

How to change the css to split in 4 the menu? Please take a look at jsfiddle



Solution :

Table layout with table-layout: fixed; can split the 4 li equally.

display:table; table-layout: fixed; - for ul

display:table-cell; for li, and remove float for li.

JsFiddle


    CSS Howto..

    How to auto resize the parent node according to its children

    How can I change the ckeditor iframe CSS styling

    What CSS properties govern how a webpage reacts to window resizing?

    How to make css styles in the document body only specific to a div

    How to fix content leaks out of an element despite use of “overflow:hidden”?

    How to make lightbox scroll the lightbox and not the page

    How do I use CSS to position a fixed variable height header and a scrollable content box?

    How to overlay a dynamically selected image over a dynamically populated div

    How to change my online store template in dbdirector ecommerce platform

    How to achieve pages like a math notebook in css?

    How do you position CSS elements directly under each other?

    How to select a range of elements in repeated pattern

    CSS Divs overlapping, how do I force one above the other?

    How to increase constant space between li inline-block list elemets?

    How to copy the html contents of one iframe to another iframe including CSS?

    CSS: how to make margin: 0px auto work

    How to close a modal box after form submit?

    How can I change the opacity of a certain text by clicking another div?

    3x3 CSS grid: how to make center div the only one with a fixed height/width?

    How to put a diagonal line over a textbox in CSS?

    how to create sprite with css [closed]

    How to bounce to top with button on image with CSS

    how to I use an Arabic font in my css?

    How do I add a horizontal submenu?

    Chrome Developer Tools: How to find out what is overriding a CSS rule?

    How to make this in html and css?

    jquery/css: I want to change the bgcolor of row only after hovering for 1 or 2 seconds. How to achieve this?

    how to apply css class condtionally in angularjs

    how to i target a another div with jquery or css

    How can I give each
  • its own bullet image?