Get Even More Visitors To Your Blog, Upgrade To A Business Listing >>

menu gets full width. list items share equally width to get full width

Tags: width ulmenu menu

menu gets full width. list items share equally width to get full width

Problem

I have an horizontal Menu and i want it to get full Width of my website but something is not right. My menu is looking like this right now and here is the code for it:



ul.menu {
    margin:0;
    padding:0;
    list-style: none;
    font-family:"Myriad Pro", "Trebuchet MS", sans-serif;
    font-size:14px;
    width:auto;
    margin-left:320px;
    top:30%;
    right:0%;
}
ul.menu a {
    text-decoration:none;
    outline:none;
    padding-top:30px;
}
ul.menu li {
    float:left;
    width:175px;
    height:85px;
    position:relative;
    cursor:pointer;
}
ul.menu li > a {
    position:absolute;
    top:0px;
    left:0px;
    width:175px;
    height:60px;
    z-index:12;
    background:transparent url(images/overlay.png) no-repeat bottom right;
    background-color: rgba(0, 0, 0, 0.75);
    -moz-box-shadow:0px 0px 2px #000 inset;
    -webkit-box-shadow:0px 0px 2px #000 inset;
    box-shadow:0px 0px 2px #000 inset;
}

enter image description here

So, i now want to make this menu get full width of the site and make each list item share the full amount of width equally so each one of these boxes will stretch at the same amount to get the full width of the website. What i tried so far is to play with width, position, display but nothing worked. I set the width of ul.menu li to 100% and what i got was

enter image description here

and by setting the width of ul.menu li > a at 100% i get this

enter image description here

Any ideas?

Problem courtesy of: Smolikas

Solution

You just need to set the width of your li to 20% because you have 5 items and

100% / 5 = 20%

DEMO

Solution courtesy of: web-tiki

Discussion

View additional discussion.



This post first appeared on CSS3 Recipes - The Solution To All Your Style Problems, please read the originial post: here

Share the post

menu gets full width. list items share equally width to get full width

×

Subscribe to Css3 Recipes - The Solution To All Your Style Problems

Get updates delivered right to your inbox!

Thank you for your subscription

×