how to make background 100% on a top menu


Tags: html,css,html5,css3

Problem :

I am trying to make a top menu which should be 100% filled with background-color and also keep the content of my menu inside my wrap id which 960px.

Can somebody explain me how to do it.

Demo: JSFiddle

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;
}


Solution :

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>


    CSS Howto..

    How to open links in a new tab/window using CSS? [duplicate]

    CSS how to target 2 attributes?

    how to center UL in my page?

    How to make CSS border-image work

    How to add Video from project directory in the background of Div

    How can i add a css rule for this code?

    How to add fade in and fade out when changing between texts in javascript

    asp .net: how to change css on span tag in c#

    How to maintain hover state even when mouseout of main drop down link

    How to put a border around the text in a button?

    How to align image to the right?

    How to keep pure-HTML-&-CSS collapsible panels open when another one is opened?

    How to create css based breadcrumb which supports IE8 [closed]

    How to get at Apache Wicket PropertyColumn data to dynamically change CSS class based on content?

    How find all elements with a specific css property in a div and add a class to div

    how to add a different css to last mysql query result using php

    How to read from CSS files with jQuery

    How to use HTML-CSS on outputting data conditionally?

    How to vertically and horizontally center two images inside a div on a responsive page

    How to place two divs side by side using css

    How to make an image follows scrolling until a certain point

    How to create CSS-based (big) quotation marks?

    How do I output compressed CSS from Compass?

    How can I set up my menu to slide out, only when the header is hovered on?

    How To Have Margin For Background Image?

    How can I get this toggled drop down menu to be open by default - rather than having to have someone click it to initialize it?

    how to make the parent width equals the width of all element inside it?

    How do I suppress errors in IntelliJ Idea 12

    How to highlight a whole table cell with padding when hovering?

    how to create a tirangle and square with ccs only?