пытается создать подменю столбца css

Question

Итак, я пытаюсь создать меню css, где дети находятся в формате столбца. Но я не могу заставить ребенка li плавать, показывая их под ними. Я не могу заставить родительский ul быть шириной дочернего элемента, он, похоже, хочет оставаться шириной родителя (я надеюсь, что это имеет смысл).

Вот 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> 

и 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} 

Я создал jsfiddle, что я в настоящее время есть, но я хочу детей падения Размещение вниз вести себя как столбцы. Который сейчас не делает. Любая помощь будет оценена!

Answer 1

Здесь вы идете.

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> 

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; 
} 

Надеется, что это помогает.

EDIT

Для работы с динамической шириной, здесь WORKING SOLUTION

Answer 2

здесь я сделать меню с подменю со всеми столбцами, которые вы хотите;)

HTML

<ul id="wrap"> 
<li> 
    <a href="#">Menu Item</a> 
    <div class="subwrap"> 
     <ul> 
      <li><a href="#">Submenu</a></li> 
      <li><a href="#">Submenu</a></li> 
      <li><a href="#">Submenu</a></li> 
     </ul> 
     <ul> 
      <li><a href="#">Submenu</a></li> 
      <li><a href="#">Submenu</a></li> 
      <li><a href="#">Submenu</a></li> 
     </ul> 
     <ul> 
      <li><a href="#">Submenu</a></li> 
      <li><a href="#">Submenu</a></li> 
      <li><a href="#">Submenu</a></li> 
     </ul> 
     <ul> 
      <li><a href="#">Submenu</a></li> 
      <li><a href="#">Submenu</a></li> 
      <li><a href="#">Submenu</a></li> 
     </ul> 
    </div> 
</li> 
<li> 
    <a href="#">Menu Item</a> 
    <div class="subwrap"> 
     <ul> 
      <li><a href="#">Submenu</a></li> 
      <li><a href="#">Submenu</a></li> 
      <li><a href="#">Submenu</a></li> 
     </ul> 
     <ul> 
      <li><a href="#">Submenu</a></li> 
      <li><a href="#">Submenu</a></li> 
      <li><a href="#">Submenu</a></li> 
     </ul> 
     <ul> 
      <li><a href="#">Submenu</a></li> 
      <li><a href="#">Submenu</a></li> 
      <li><a href="#">Submenu</a></li> 
     </ul> 
     <ul> 
      <li><a href="#">Submenu</a></li> 
      <li><a href="#">Submenu</a></li> 
      <li><a href="#">Submenu</a></li> 
     </ul> 
     <ul> 
      <li><a href="#">Submenu</a></li> 
      <li><a href="#">Submenu</a></li> 
      <li><a href="#">Submenu</a></li> 
     </ul> 
    </div> 
</li> 

CSS

#wrap { 
    min-width: 200px; 
    background-color: yellow; 
} 
#wrap > li { 
    float: left; 
    display: block; 
    background-color: orange; 
    margin-left: 20px; 
} 
#wrap li:hover .subwrap { 
    display: block; 
} 
#wrap li .subwrap { 
    display: none; 
    height: 200px; 
    background-color: pink; 
    position: absolute; 
} 
#wrap li .subwrap ul { 
    float: left; 
    margin-left: 20px; 
    padding: 0; 
} 
#wrap li .subwrap ul:first-child { 
    margin-left: 0; 
} 
#wrap li .subwrap ul li { 
    display: block; 
    float: none; 
} 

Пример: http://jsfiddle.net/Hendrymc/8D5T4/