How to equally fill padding between menu items to stretch menu width to 100% parent div width?

Question

What is the best no JS way (most commont browsers friendly) to achieve this?

I have found a few related questions & answers:

width: 100% / number_of_li-s_in_ul;

http://jsfiddle.net/qx4WG/ ("static" calculated size for each li) - unable to use due different sizes of li

li {display: table-cell;} 

UPDATE: http://jsfiddle.net/jwJBd/1035/ -> works good, but I'm also using sub-menus and position: relative; doesn't work here to position the sub-menu below current li. When position is set to static it enlarges the parent LI every time it's set to display:block;

display: box;

never used it before, just read a few articles and it looks like the browser support is minimal

Answer 1

If i understood your question correctly, you want to display evenly menu elements like a table would do AND be able to display css sub-menus using absolute and relative positioning.

Your jsfiddle was close, the only thing i had to fix was the positioning of the sub-menu

.sub-menu {
    display: none;
    /*left: 0;*/ /* i removed this */
    position: absolute;
    /* PLAY with this */
}

jsFiddled here

[post edit]

It would also be relevant to set your <li> parent with a table-layout:fixed property. This way, <li> will be set to equal width.

#horizontal-style {
    display: table;
    width: 100%;
    table-layout:fixed; /* try this */
}