Pedro Pedro - 4 months ago 7
CSS Question

how to make background 100% on a top menu

iam trying to do a top menu with the width of the background color to 100%.
and keep the content of my menu inside my wrap id which 960px.

Can somebody explain me how to do it.

Demo: http://jsfiddle.net/NnCVv/246/

html:

<div id="wrap">
<ul>
<li><a href="#">Link 1</a></li>
<li><a href="#">Link 2</a></li>
<li><a href="#">Link 3</a></li>
<li><a href="#">Link 4</a></li>
<li><a href="#">Link 5</a></li>
<li><a href="#">Link 6</a></li>
<li><a href="#">Link 7</a></li>
<li><a href="#">Link 8</a></li>
<li><a href="#">Link 9</a></li>
</ul>
</div>


CSS

*
{
padding: 0px;
margin: 0px;
}

#wrap
{
width: 960px;
margin: 0px auto;
margin: 0px auto;
}

ul
{
background: navy;
overflow: hidden;
}

ul li
{
float: left;
list-style: none;
}

ul li a
{
display: block;
padding: 10px 15px;
color: white;
text-decoration: none;
}

Answer

Try this

*
{
    padding: 0px;
    margin: 0px;
}

#wrap
{
    width: 100%;
    margin: 0px auto;
    margin: 0px auto;
}

ul
{
    background: navy;
    overflow: hidden;
}

ul li
{
    float: left;
    list-style: none;
    width:11%;
}


    ul li a {
    display: block;
    padding-top: 20%;
    padding-bottom: 20%;
    color: white;
    text-decoration: none;
  

}
<div id="wrap">
<ul>
  <li><a href="#">Link 1</a></li>
  <li><a href="#">Link 2</a></li>
  <li><a href="#">Link 3</a></li>
  <li><a href="#">Link 4</a></li>
  <li><a href="#">Link 5</a></li>
  <li><a href="#">Link 6</a></li>
  <li><a href="#">Link 7</a></li>
  <li><a href="#">Link 8</a></li>
  <li><a href="#">Link 9</a></li>
</ul>
</div>