CSS Positioning of div inside list item

Question

I am trying to build a megamenu. so I have an unordered list, positioned relative to it's container.

In it are list items which contain a link. Along with a container div that is absolutely positioned.

I am following this tutorial: http://net.tutsplus.com/tutorials/html-css-techniques/how-to-build-a-kick-butt-css3-mega-drop-down-menu/

What I am trying to do, however, is force each container div to be the max width of the container... in other words if you hover over the first menu item, I need the resulting shown div to be 100% width of the whole menu, in addition to being aligned left, rather than being 100% the width of the containing LI, and left aligned to that.

How can I do this?

Here's the HTML and CSS as it currently exists, and a link to it on jsfiddle

HTML

<ul id="menu">
  <li><a href="~/">Home Page</a></li>
  <li><a href="#" onclick="return false;">About Us</a>
    <div class="dropdown_1columns">
      <p>5 Columns content</p>
    </div>
  </li>
  <li><a href="#" onclick="return false;">Solutions</a>
    <div class="dropdown_2columns">
      <p>5 Columns content</p>
    </div>
  </li>
  <li><a href="#" onclick="return false;">Customer Support</a>
    <div class="dropdown_3columns">
      <p>5 Columns content</p>
    </div>
  </li>
  <li><a href="#" onclick="return false;">OrboNation</a>
    <div class="dropdown_4columns">
      <p>5 Columns content</p>
    </div>
  </li>
  <li><a href="#" onclick="return false;">Business Partners</a>
    <div class="dropdown_5columns">
      <p>5 Columns content</p>
    </div>
  </li>
  <li><a href="#" onclick="return false;">News &amp; Events</a>
    <div class="dropdown_6columns">
      <p>5 Columns content</p>
    </div>
  </li>
  <li><a href="#" onclick="return false;">Knowledge Center</a>
    <div class="dropdown_7columns">
      <p>5 Columns content</p>
    </div>
  </li>
</ul>

CSS

#menu {  
    position:relative !important;
    list-style:none;  
    width:100%;
    float:none;
    clear:both;
    margin:0;  
    height:43px;  
    padding:0;  
/* Rounded Corners */  

    -moz-border-radius: 5px;  
    -webkit-border-radius: 5px;  
    border-radius: 5px;  

    /* Background color and gradients */  

    background: #d9d9d9;  
    background: -moz-linear-gradient(top, #ddd, #d9d9d9);  
    background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#ddd), to(#d9d9d9));  

    /* Borders */  

    border: 1px solid #002232;  

    -moz-box-shadow:inset 0px 0px 1px #edf9ff;  
    -webkit-box-shadow:inset 0px 0px 1px #edf9ff;  
    box-shadow:inset 0px 0px 1px #edf9ff;  }  
#menu li {  
    float:left;  
    display:block;  
    text-align:center;  
    position:relative;  
    padding: 4px 10px 4px 10px;  
    margin-right:10px;  
    margin-top:7px;  
    border:none;  
}  
#menu li:hover {  
    border: 1px solid #777777;  
    padding: 4px 9px 4px 9px;  

    /* Background color and gradients */  

    background: #F4F4F4;  
    background: -moz-linear-gradient(top, #F4F4F4, #EEEEEE);  
    background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#F4F4F4), to(#EEEEEE));  

    /* Rounded corners */  

    -moz-border-radius: 5px 5px 0px 0px;  
    -webkit-border-radius: 5px 5px 0px 0px;  
    border-radius: 5px 5px 0px 0px;  
} 

#menu li a {
    font-family:Arial, Helvetica, sans-serif;
    font-size:14px; 
    color: #333;
    display:block;
    outline:0;
    text-decoration:none;
    text-shadow: 1px 1px 1px #000;
}

#menu li:hover a {
    color:#161616;
    text-shadow: 1px 1px 1px #FFFFFF;
}

.dropdown_1columns, 
.dropdown_2columns, 
.dropdown_3columns, 
.dropdown_4columns,
.dropdown_5columns,
.dropdown_6columns,
.dropdown_7columns {
    width:100% !important;
    margin:4px auto;
    position:absolute;
    z-index:999;
    left:-999em; /* Hides the drop down */
    text-align:left;
    padding:10px 5px 10px 5px;
    border:1px solid #777777;
    border-top:none;    
    /* Gradient background */
    background:#F4F4F4;
    background: -moz-linear-gradient(top, #EEEEEE, #BBBBBB);
    background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#EEEEEE), to(#BBBBBB));
    /* Rounded Corners */
    -moz-border-radius: 0px 5px 5px 5px;
    -webkit-border-radius: 0px 5px 5px 5px;
    border-radius: 0px 5px 5px 5px;
}
/*
.dropdown_1columns {width: 140px;}
.dropdown_2columns {width: 280px;}
.dropdown_3columns {width: 420px;}
.dropdown_4columns {width: 560px;}
.dropdown_5columns {width: 700px;}
.dropdown_6columns {width: 700px;}
.dropdown_7columns {width: 700px;}
*/
#menu li:hover .dropdown_1columns, 
#menu li:hover .dropdown_2columns, 
#menu li:hover .dropdown_3columns,
#menu li:hover .dropdown_4columns,
#menu li:hover .dropdown_5columns,
#menu li:hover .dropdown_6columns,
#menu li:hover .dropdown_7columns {

    left:-1px;top:auto;
}

Link to Fiddle

http://jsfiddle.net/o7thwd/dZbPy/

What I want is to have each dropped down container be 100% the width of the main menu, but left aligned

Answer 1

When you remove position: relative from #menu li, the submenu div positions absolute to the #menu, see updated JSFiddle.

Answer 2

Remove the position:relative from the li. This allows the dropdown_column to be positioned relative to the parent ul. Then change the dropdown_columns to span the whole width using left:-1px; right:-1px.

See this JSFiddle