trying to create a css column sub menu

So I'm trying to create a css menu, where the children are in a column format. But I cannot seem to get the child li's to float, displaying their ul's underneath them. I can't seem to get the parent ul to be the width of the child, it seems to want to remain the width of the parent (I hope this is making sense).

Here's the HTML:

<div class="header">
  <ul class="nav menu">
    <li class="item-101 current active"><a href="/">Home</a></li>
    <li class="item-112 deeper parent"><a href="/?Itemid=112">Accommodation</a>
      <ul class="nav-child unstyled small">
        <li class="item-161 deeper parent"><a href="/?Itemid=161">Property Type</a>
          <ul class="nav-child unstyled small">
            <li class="item-149"><a href="/?Itemid=149">Apartments</a></li>
            <li class="item-150"><a href="/?Itemid=150">Suites</a></li>
            <li class="item-151"><a href="/?Itemid=151">Penthouses</a></li>
          </ul>
        </li>
        <li class="item-179 deeper parent"><a href="/?Itemid=179">Information</a>
          <ul class="nav-child unstyled small">
            <li class="item-152"><a href="/?Itemid=152">Inclusions</a></li>
            <li class="item-162"><a href="/?Itemid=162">Gallery</a></li>
          </ul>
        </li>
      </ul>
    </li>
    <li class="item-113"><a href="/?Itemid=167">Contact</a></li>
  </ul>
</div>

and the CSS:

.header ul{margin:0;padding:0;list-style:none}
.header ul li{position:relative;float:left;display:inline;margin:0;padding:0}
.header ul li > a{padding:25px 15px;font-size:20px;line-height:20px;color:#666;font-weight:800;text-transform:uppercase;display:block}
.header ul li.item-101 > a{padding-left:0}
.header ul li.active > a,
.header ul li > a:hover{color:#1a2440}

.header ul li > ul{position:absolute;left:-9999em;width:auto;min-width:100%;max-width:500px;background:rgb(255,255,255);background:rgba(255,255,255,0.95);border:solid 1px #eaeaea}
.header ul li > ul li{float:left;display:inline-block;background:#f0f}
.header ul li > ul li:last-child{border-bottom:none}
.header ul li > ul li > a{padding:13px 15px;margin:0;font-size:16px;line-height:16px;color:#006699;font-weight:800;text-transform:uppercase;background:none;display:block;white-space:nowrap}
.header ul li > ul li.active > a,
.header ul li > ul li > a:hover{color:#009fe3}

.header ul li > ul li > ul{position:relative;float:none;display:block;top:0;left:0;background:none;border:none}
.header ul li > ul li > ul li{float:none;display:block;top:0;left:0;border-top:solid 1px #d7d7d7;background:#f9f}

.header ul li.parent:hover > a{color:#1a2440}
.header ul li.parent:hover > ul{left:0}

I've created a jsfiddle of what I've currently got, but I want the children of the Accommodation drop down to behave like columns. Which it's currently not doing. Any help would be appreciated!

Solution

Here you go.

WORKING SOLUTION

The HTML:

<div class="header">
  <ul class="nav menu">
    <li class="item-101 current active"><a href="/">Home</a></li>
    <li class="item-112 deeper parent"><a href="/?Itemid=112">Accommodation</a>
      <ul class="nav-child unstyled small">
        <li class="item-161 deeper parent"><a href="/?Itemid=161">Property Type</a>
          <ul class="nav-child unstyled small">
            <li class="item-149"><a href="/?Itemid=149">Apartments</a></li>
            <li class="item-150"><a href="/?Itemid=150">Suites</a></li>
            <li class="item-151"><a href="/?Itemid=151">Penthouses</a></li>
          </ul>
        </li>
        <li class="item-179 deeper parent"><a href="/?Itemid=179">Information</a>
          <ul class="nav-child unstyled small">
            <li class="item-152"><a href="/?Itemid=152">Inclusions</a></li>
            <li class="item-162"><a href="/?Itemid=162">Gallery</a></li>
          </ul>
        </li>
      </ul>
    </li>
    <li class="item-113"><a href="/?Itemid=167">Contact</a></li>
  </ul>
</div>

The CSS:

.header ul{margin:0;padding:0;list-style:none}
.header ul li{position:relative;float:left;display:inline;margin:0;padding:0}
.header ul li > a{padding:25px 15px;font-size:20px;line-height:20px;color:#666;font-weight:800;text-transform:uppercase;display:block}
.header ul li.item-101 > a{padding-left:0}
.header ul li.active > a,
.header ul li > a:hover{color:#1a2440}

.header ul li > ul{position:absolute;left:-9999em;width:auto;min-width:100%;max-width:500px;background:rgb(255,255,255);background:rgba(255,255,255,0.95);border:solid 1px #eaeaea}
.header ul li > ul li{float:left;display:inline-block;background:#f0f}
.header ul li > ul li:last-child{border-bottom:none}
.header ul li > ul li > a{padding:13px 15px;margin:0;font-size:16px;line-height:16px;color:#006699;font-weight:800;text-transform:uppercase;background:none;display:block;white-space:nowrap}
.header ul li > ul li.active > a,
.header ul li > ul li > a:hover{color:#009fe3}

.header ul li > ul li > ul{position:relative;float:none;display:block;top:0;left:0;background:none;border:none}
.header ul li > ul li > ul li{float:none;display:block;top:0;left:0;border-top:solid 1px #d7d7d7;background:#f9f}

.header ul li.parent:hover > a{color:#1a2440}
.header ul li.parent:hover > ul{left:0}


.header ul li > ul {
    background: none repeat scroll 0 0 rgba(255, 255, 255, 0.95);
    border: 1px solid #EAEAEA;
    left: -9999em;
    max-width: 1010px;
    min-width: 356px;
    position: absolute;
    width: auto;
}


.header ul li > ul li {
    background: none repeat scroll 0 0 #FF00FF;
    display: inline-block;
    float: left;
    width: 178px;
}

.header ul li > ul li {
    background: none repeat scroll 0 0 #FF00FF;
    display: inline-block;
    float: left;
    width: 178px;
}

Hope this helps.

EDIT

To work with dynamic width, here is the WORKING SOLUTION