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

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

您需要将width:100%添加到绝对元素

.header .menu
{
    position: absolute;
    top: 16px;
    right: 0;
    width:100%
}

<强> DEMO

Answer 2

@ Sowmya的答案有效，但作为替代方案，我个人更喜欢在使用绝对定位时设置显式定位属性：

.header .menu
{
    position: absolute;
    top: 16px;
    right: 0;
    left: 0;
    bottom: 0;
}

<强> DEMO

Answer 3

简单解决方案

您需要做的就是从menu

中删除ul课程

更改此

<ul class="nav menu">

到这个

<ul class="nav">

<强> Working Demo

Answer 4

我认为以下代码可行。

.header .menu{
   position: absolute;
   top: 16px;
   right: 0;
   width:100%
}