title: trying to create a css column sub menu
body: <p>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).</p>
  
  <p>Here's the HTML:</p>
  
  <pre><code>&lt;div class="header"&gt;
    &lt;ul class="nav menu"&gt;
      &lt;li class="item-101 current active"&gt;&lt;a href="/"&gt;Home&lt;/a&gt;&lt;/li&gt;
      &lt;li class="item-112 deeper parent"&gt;&lt;a href="/?Itemid=112"&gt;Accommodation&lt;/a&gt;
        &lt;ul class="nav-child unstyled small"&gt;
          &lt;li class="item-161 deeper parent"&gt;&lt;a href="/?Itemid=161"&gt;Property Type&lt;/a&gt;
            &lt;ul class="nav-child unstyled small"&gt;
              &lt;li class="item-149"&gt;&lt;a href="/?Itemid=149"&gt;Apartments&lt;/a&gt;&lt;/li&gt;
              &lt;li class="item-150"&gt;&lt;a href="/?Itemid=150"&gt;Suites&lt;/a&gt;&lt;/li&gt;
              &lt;li class="item-151"&gt;&lt;a href="/?Itemid=151"&gt;Penthouses&lt;/a&gt;&lt;/li&gt;
            &lt;/ul&gt;
          &lt;/li&gt;
          &lt;li class="item-179 deeper parent"&gt;&lt;a href="/?Itemid=179"&gt;Information&lt;/a&gt;
            &lt;ul class="nav-child unstyled small"&gt;
              &lt;li class="item-152"&gt;&lt;a href="/?Itemid=152"&gt;Inclusions&lt;/a&gt;&lt;/li&gt;
              &lt;li class="item-162"&gt;&lt;a href="/?Itemid=162"&gt;Gallery&lt;/a&gt;&lt;/li&gt;
            &lt;/ul&gt;
          &lt;/li&gt;
        &lt;/ul&gt;
      &lt;/li&gt;
      &lt;li class="item-113"&gt;&lt;a href="/?Itemid=167"&gt;Contact&lt;/a&gt;&lt;/li&gt;
    &lt;/ul&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>and the CSS:</p>
  
  <pre><code>.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 &gt; 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 &gt; a{padding-left:0}
  .header ul li.active &gt; a,
  .header ul li &gt; a:hover{color:#1a2440}
  
  .header ul li &gt; 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 &gt; ul li{float:left;display:inline-block;background:#f0f}
  .header ul li &gt; ul li:last-child{border-bottom:none}
  .header ul li &gt; ul li &gt; 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 &gt; ul li.active &gt; a,
  .header ul li &gt; ul li &gt; a:hover{color:#009fe3}
  
  .header ul li &gt; ul li &gt; ul{position:relative;float:none;display:block;top:0;left:0;background:none;border:none}
  .header ul li &gt; ul li &gt; ul li{float:none;display:block;top:0;left:0;border-top:solid 1px #d7d7d7;background:#f9f}
  
  .header ul li.parent:hover &gt; a{color:#1a2440}
  .header ul li.parent:hover &gt; ul{left:0}
  </code></pre>
  
  <p>I've created a <a href="http://jsfiddle.net/SoulieBaby/UDPDg/" rel="nofollow">jsfiddle</a> of what I've currently got, but I want the children of the Accommodation drop down to behave like columns. Which it's currently <em>not</em> doing. Any help would be appreciated!</p>