下拉，适应父级的宽度？

Question

So I am trying to get my dropdown to work properly. The dropdown is under a list-item in my header that changes depending on what username the user have. That makes the size differ but I can't get the dropdown to follow in the width resize.

Example 1: http://jsfiddle.net/73tUx/

Here does it work properly but what if...

Example 2: http://jsfiddle.net/73tUx/1/

As you can see in example 2 the dropdown is wider than the list-item. How can I make it change width as well?

CSS:

header {
height: 72px;
width: 100%;
z-index: 999;
position: relative;
background-color: #2C3E50;
}

header ul {
margin: 0;
padding: 0;
list-style-type: none;
width: 600px;
height: 72px;
margin-left: auto;
margin-right: auto;
}

.navItem {
float: left;
padding-left: 35px;
padding-right: 35px;
padding-top: 26px;
padding-bottom: 26px;
text-decoration: none;
color: #FFF;
}

.navItem:hover {
background-color: #34495e;
}

header ul li a.right {
float: right;
}

.dropdown {
list-style-type: none;
}

.drop {
position: absolute;
float: right;
background: #2C3E50;
margin-top: 72px;
right: 103px;
width: 150px;
height: 140px;
display: none;
z-index: -10;
border-bottom-left-radius: 4px;
border-bottom-right-radius: 4px;

}

.drop li {
list-style-type: none;
height: 25px;
padding-top: 10px;
padding-left: 20px;
width: 123px;
}

.drop li a {
color: #FFF;
text-decoration: none;
}

.drop li:hover {
background: #34495e;
}

Answer 1

header ul{width:100%;position:relative;}

Answer 2

DEMO

I made few changes here and there in css. Major one was moving padding and float from anchor to the list.

Note: That the dropdown div is so small that i had to add overflow auto to see the hidden content.

CSS:

header {
    height: 72px;
    width: 100%;
    z-index: 999;
    position: relative;
    background-color: #2C3E50;
}

header ul {
    margin: 0;
    padding: 0;
    list-style-type: none;
    width: 600px;
    height: 72px;
    margin-left: auto;
    margin-right: auto;
}
ul > li{
    float: left;
    padding-left: 35px;
    padding-right: 35px;
    padding-top: 26px;
    padding-bottom: 26px;
    position:relative;
}
.navItem {  
    text-decoration: none;
    color: #FFF;
}

.navItem:hover {
    background-color: #34495e;
}

header ul li a.right {
    float: right;
}

.dropdown {
    list-style-type: none;
}

.drop {
    background: none repeat scroll 0 0 #2C3E50;
    border-bottom-left-radius: 4px;
    border-bottom-right-radius: 4px;
    display: none;
    float: right;
    height: 140px;
    margin-top: 46px;
    overflow: auto;
    position: absolute;
    right: 0;
    width: 100%;
    z-index: -10;
}

.drop li {
    list-style-type: none;
    height: 25px;
    padding-top: 10px;
    padding-left: 20px;
    width: 123px;
}

.drop li a {
    color: #FFF;
    text-decoration: none;
}

.drop li:hover {
    background: #34495e;
}