css - 绝对位置的菜单现在以全宽显示

Question

我有一个 1090 像素宽的标题，位置是相对的。菜单 div 位置是绝对的。此菜单未以全宽显示(查看屏幕截图，白色背景是菜单的大小)。

HTML:

<div class="container">
<a href="/"><img class="logo" src="/kubilai/templates/frontend//images/logo.png"></a>
<div class="header">
<div class="container">
<div class="menu">
<ul class="nav menu">
<li class="item-101 first"><a href="/kubilai/index.php/home"><span>Home</span></a></li><li class="item-104 current active"><a href="/kubilai/"><span>Pradinis</span></a></li><li class="item-105"><a href="/kubilai/index.php/uzsakymas"><span>uzsakymas</span></a></li><li class="item-106"><a href="/kubilai/"><span>darbu galerija</span></a></li><li class="item-107 last"><a href="/kubilai/"><span>kontaktai</span></a></li></ul>
</div>
</div>
</div>

CSS:

.container
{
    width: 1090px;
    margin: auto;
    position: relative;
}
.header
{
    height: 104px;
    margin-top: 36px;
    /*+box-shadow:0 7px 6px #F1F0F0;*/
    -moz-box-shadow: 0 7px 6px #F1F0F0;
    -webkit-box-shadow: 0 7px 6px #F1F0F0;
    -o-box-shadow: 0 7px 6px #F1F0F0;
    box-shadow: 0 7px 6px #F1F0F0;
}
.header .menu
{
    position: absolute;
    top: 16px;
    right: 0;
}
.header .menu LI
{
    font-weight: bolder;
    text-transform: lowercase;
    display: inline;
    margin-left: 20px;
}
.header .menu LI A
{
    color: #B5B5B5;
    font-size: 14px;
    font-family: calibri;
    padding: 5px 20px;
    border-radius: 4px;
}

Answer 1

简单的解决方案

您需要做的就是从 ul 中删除 menu 类

改变这个

<ul class="nav menu">

对此

<ul class="nav">

Working Demo