css - 试图创建一个CSS列子菜单

因此，我试图创建一个css菜单，其中子菜单为列格式。但是我似乎无法让孩子li漂浮，在他们的下面显示他们的ul。我似乎无法让父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，但是我希望Accommodation的子项的行为类似于列。它目前没有在做。任何帮助，将不胜感激！

最佳答案

干得好。

WORKING SOLUTION

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

希望这可以帮助。

编辑

要使用动态宽度，这里是WORKING SOLUTION

关于css - 试图创建一个CSS列子菜单，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/19581554/