Question

i want to make a navigation which fits automatically to the width of the website. my menus are dynamic so if menu is added the gap between menu should compress and fit to the width of website. how can it be possible with jquery and css.

my html is like this:

<div class="menu">
         <ul>
            <li><a href="#">Home</a></li>
            <li><a href="#">About Us</a></li>
            <li><a href="#">Services</a></li>
            <li><a href="#">Contact Us</a></li>
         </ul>
        </div>

and by css is:

.menu{
height:auto;
width:400px;
}

.menu ul{ width: 100%; list-style:none;}
.menu ul li{ list-style:none;}
.menu ul li a{ float:left; padding:10px 20px;
background-color:#cccccc;}
.menu ul li a:hover{ background-color:#eeeeee;}

and if i add a menu the menu will come down. so i wish if i could make the padding dynamic so that it will contract if i add new item.

Answer 1

Use percentage widths on your top-level menu elements.