I have horizontal menu navigation using the ulmain menu as a container and lias a menu item, I use the display table for uland table-cell for li, so when each licorresponds to the width of ul, the problem is the gap between each menu item of words, this is not the same, the reason is that I am installing the padding between the elements li, but if I get rid of the padding it will not have any space at all, I need to maintain the gap between each menu item of words the same way, even when the element lihas a word , and I need to maintain responsiveness of the display.
Demo
Css code:
body{
background-color: #ff2;
margin: 0px !important;
}
ul {
display:table;
width:100%;
box-sizing:border-box;
-moz-box-sizing:border-box;
-webkit-box-sizing:border-box;
background-color: #F25800;
padding: 0 10px;
}
li {
display:table-cell;
text-align:center;
padding: 10px 12px;
}
li:hover{
background-color: #64b448;
}
li a{
text-decoration:none;
}
li a span{
font-size: 13px;
color: #fff;
}
html code:
<ul>
<li class="ui-menu-item level0 classic parent ">
<div class="open-children-toggle"></div>
<a href="http://test.com/kebutuhan-rumah.html" class="level-top"><span>Kebutuhan Rumah</span></a>
</li>
<li class="ui-menu-item level0 classic parent ">
<div class="open-children-toggle"></div>
<a href="http://test.com/kebutuhan-pribadi.html" class="level-top"><span>Kebutuhan Pribadi</span></a>
</li>
<li class="ui-menu-item level0 classic parent ">
<div class="open-children-toggle"></div>
<a href="http://test.com/makanan-minuman.html" class="level-top"><span>Makanan & Minuman</span></a>
</li>
<li class="ui-menu-item level0 classic parent ">
<div class="open-children-toggle"></div>
<a href="http://test.com/kebutuhan-kantor.html" class="level-top"><span>Kebutuhan Kantor</span></a>
</li>
<li class="ui-menu-item level0 classic parent ">
<div class="open-children-toggle"></div>
<a href="http://test.com/otomotif.html" class="level-top"><span>Otomotif</span></a>
</li>
<li class="ui-menu-item level0 classic parent ">
<div class="open-children-toggle"></div>
<a href="http://test.com/listrik-teknik.html" class="level-top"><span>Listrik & Teknik</span></a>
</li>
<li class="ui-menu-item level0 classic parent ">
<div class="open-children-toggle"></div>
<a href="http://test.com/alat-bangunan.html" class="level-top"><span>Alat Bangunan</span></a>
</li>
<li class="ui-menu-item level0 classic parent ">
<div class="open-children-toggle"></div>
<a href="http://test.com/elektronik.html" class="level-top"><span>Elektronik</span></a>
</li>
<li class="ui-menu-item level0 classic parent ">
<div class="open-children-toggle"></div>
<a href="http://test.com/pakaian.html" class="level-top"><span>Pakaian</span></a>
</li>
<li class="ui-menu-item level0 classic parent ">
<div class="open-children-toggle"></div>
<a href="http://test.com/pecah-belah.html" class="level-top"><span>Pecah Belah</span></a>
</li>
<li class="ui-menu-item level0 classic parent ">
<div class="open-children-toggle"></div>
<a href="http://test.com/kesehatan.html" class="level-top"><span>Kesehatan</span></a>
</li>
<li class="ui-menu-item level0 classic parent ">
<div class="open-children-toggle"></div>
<a href="http://test.com/mainan-hobi.html" class="level-top"><span>Mainan & Hobi</span></a>
</li>
</ul>