CODEWITHSUNDEEP
css
user3214027
user3214027

Reputation: 13

Evenly Distribute menu list items using css

I'd like to evenly distribute the first level (horizontal) menu of this site http://ipa.staging.nextdigital.com without affecting the dropdown menu style layout.

HTML:

<section class="top-bar-section">
    <ul class="left">
        <li class="active has-dropdown">
            <a class="top-bar-l-1-anchor" href="/about-us">About Us</a>
                <span class="mega-menu-next js-generated">next</span>
                <ul class="dropdown" style="width: 970px;">
                    <li class="title back js-generated">
                     ...
                    </li>
                    <li class="">
                        <a href="/about-us/ipa-office-locations">Office locations</a>
                    </li>
                    <li class="">
                        <a href="/about-us/our-senior-team">Our Senior Team</a>
                    </li>
                </ul>
        </li>
        <li class="has-dropdown">
        <li class="has-dropdown">
        <li class="has-dropdown">
        <li class="has-dropdown">
        <li class="quicklinks has-dropdown">
    </ul>
</section>

I tried using display: table/table-cell approach on the first level list and worked nicely however it carried over the second level list.

ul.left {
    display:table;
    width:100%;
}

ul.left li.has-dropdown {
    display:table-cell;
    text-align:center;
    float:none;
}
ul.left li.has-dropdown li {
    text-align:left;
}

Any css solution is highly appreciated.

Upvotes: 1

Views: 245

Answers (1)

Minister
Minister

Reputation: 1238

It seems you need to fix the size of every LI (or A) like this:

ul.left li {
    width: 150px;
}

The above will affect the next levels, so you have 2 options available:

(1) Use ">" CSS selector instead and affect direct childs only (check the browser compatibility of this CSS selector):

ul.left > li {
    width: 150px;
}

(2) Reset the next levels' width (after the very first code above):

ul.left li ul li {
    width: auto;
}

Let me know if I'm missing something else.

Upvotes: 1

Related Questions