Html 如何在顶部菜单上100%显示背景

我正在尝试制作一个顶部菜单，该菜单应100%填充

背景色

，并将菜单内容保留在我的包装id（960px）内

谁能给我解释一下怎么做吗

演示：

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>

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

试试这个

*
{
填充：0px；
边际：0px；
}
#包裹
{
宽度：100%；
保证金：0px自动；
保证金：0px自动；
}
保险商实验室
{
背景：海军；
溢出：隐藏；
}
ulli
{
浮动：左；
列表样式：无；
宽度：11%；
}
ullia{
显示：块；
垫面：20%；
垫底：20%；
颜色：白色；
文字装饰：无；
}

在其周围添加一个部分作为包装。由于您可能希望重用

wrap

将其声明为类

CSS: HTML:

---

@SenjutiMahapatra我试图使背景颜色与菜单相同，并且背景颜色为100%：

当屏幕分辨率大于960px，即1200px或更高时，是否希望背景延伸到浏览器宽度的100%？是否有办法将菜单宽度（ul）调整到960px
#header {
  background: navy;
}

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

ul {
  overflow: hidden;
}

<section id="header">
  <div class="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>
</section>