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 add a id tag in php output?

    css rules multi class, how to match two out of many

    How to click CSS with a space using Selenium Webdriver

    How to get all blue background divs to align to the left and get all the red divs to align to the right using the css float property?

    How to set jquery ui icon as background image per css?

    How to start developing Android application with HTML5, CSS, JavaScript and jquery? [closed]

    How to position an image inside a DIV with dynamic height with pure CSS/HTML?

    CSS - How to set an elements height as a % of a container with auto height?

    how to make textarea looks like input[text] on form invalid

    css - how to get floated divs to stack when you zoom in

    CSS Column Help: How do I get a column within a column?

    How to create multi-column data entry form using CSS in Asp.Net?

    How to design a web page with multiple color panes without tables [duplicate]

    How to set margin for elements in my case

    How to indent the text in a custom unordered list

    How to set font style light?

    How to prevent (bootstrap) fixed top navigation from zooming on mobile

    If div is visible, than show that content in other div with jQuery

    How to make my first-child in css work properly?

    How to add a shadow for underline (bottom border) in css

    How to center two columns using CSS?

    How to use webpack and css-loader to load only specific css class?

    How to fix unable to load css file in maven build on maven springmvc project [closed]

    How to make pop up div locked to the page coordinates in jQuery

    How to fit your website for all or at lest most screen resolutions?

    How to select inner div in an unordered list

    html / css / pre / code: how to force carriage return

    How to fix an overlapping image in CSS?

    How do you position div's in html5? [closed]

    What is the ::content pseudo-element and how does it work?