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

Question

因此，我正在尝试创建一个 CSS 菜单，其中的子项采用列格式。但我似乎无法让孩子 li's 漂浮，在它们下面显示他们的 ul's。我似乎无法让父母 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

干得好。

工作解决方案

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

希望这可以帮助。

编辑

要使用动态宽度，这里是工作解决方案

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/