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 make styling and functioning of form elements get not to break in all browsers?

    How to set a css class based on content in rails

    How to position button in the middle

    How to call
  • tag CSS
  • How to make common reusable css for almost every common things in web design?

    How to use first-child?

    How do I remove the double border on this table?

    How to rotate + flip element with CSS

    How to prevent an empty img element from shrinkage?

    How can I use CSS transitions to animate a responsive layout's vertical orientation?

    How can I make a CSS selector for a button with two classes existing in .less?

    How to resize animated gif with HTML/CSS?

    2 Sidebar Columns Layout (How)?

    How to use numbers from a js file in the css sheet?

    How to break a table with CSS diagonally or vertically?

    CSS, how to align a button vertically next to large images

    Confusion as to how clearfix actually works

    how to except all elements css inside div with class?

    how to set button background such that it takes up height and width of parent div? what css property affects which dimension?

    How to apply a CSS style to div AND the div nested in the div [duplicate]

    CSS3: How to add more than 2 CSS Ribbon effects to same banner?

    HTML+CSS : how to move not close divs to create a right column?

    how to bypass style in element that is automatically applied through class?

    How to grows up a div height with a table that has your rows added dynamically?

    How to apply page css to a polymer component

    How to change the color of an active h5 tab using jQuery or CSS

    How do I add custom fonts? [duplicate]

    How to style a “list item > link” in jquery mobile

    Wordpress plugin: How to depend on other plugins?

    how to make target link work giving different css properities