CSS 下拉菜单：2 列和 Headers

Question

我刚从 6207957 回来，但不幸的是，经过数小时的尝试并没有得到我真正想要的...我想要一个带有子标题的 2 列下拉菜单，从以下位置订购从上到下（不是从左到右）。

这是我想要的： Dropdown menu with 2 columns and subheaders, ordered from top to bottom

但我只做到了这一点： Wrong order direction (left to right) and not showing all products links

a {
 text-decoration: none;
}
a:hover {
 color: rgb(206,17,38);
}
nav {
 float: right; 
 margin-top:80px;
}
nav ul{
    
    height:35px;
    list-style:none;
    margin:0;
    padding:0;
}
nav li{
    float:left;
    padding:0px;
 color:#ffffff;
}
nav > ul > li > a {
 font-family: 'Gruppo', cursive;
 font-size: 24px; 
 line-height:normal;
}
nav > ul > li > a:hover {
 font-family: 'Gruppo', cursive;
 font-size: 24px; 
 line-height:normal;
}
nav > ul > li > ul > li {
 font-family: 'Gruppo', cursive;
 font-size: 18px; 
 line-height:normal;
}
nav > ul > li > ul > li > ul > li > a {
 font-family: 'PT Sans', sans-serif;
 font-size: 14px;
 line-height:normal;
}
nav > ul > li > ul > li > ul > li > a:hover {
 font-family: 'PT Sans', sans-serif;
 font-size: 14px;
 line-height:normal; 
    color:rgb(206,17,38);
}
nav li a{   
    color:rgb(0,56,147);
    display:block;  
    margin:0px;
    padding:0px 25px;
    text-align:center;
}
nav li a:hover, nav ul li:hover a{
    background: rgb(0,56,147);
    color:#FFFFFF;
}
nav li ul{
    background: rgb(0,56,147);
    display:none;
    height:auto;
    padding:0px;
    margin:0px;
    border:0px;
    position:absolute;
    width:700px;
    z-index:200;
    /*top:1em;
    /*left:0;*/
}
nav li:hover ul{
    display:block;
}
nav li li {    
    display:block;
    float:left;
    margin:0px;
    padding:0px; 
    width:350px;
}
nav li:hover li a{
    background:none;
}
nav li ul a{
    display:block;
    font-style:normal;
    margin:0px;
    padding:0px 10px 0px 15px;
    text-align:left;
}
nav li ul a:hover, nav li ul li:hover a{
    background:rgb(0,56,147);
    border:0px;
    color:#ffffff;
    text-decoration:none;
}
nav p{
    clear:left;
}

<nav>
      <ul>
        <li><a href="#">Products</a>
          <ul>
            <li>Product Group Heading 1
              <ul>
                <li><a href="#">Product 1</a></li>
                <li><a href="#">Product 2</a></li>
                <li><a href="#">Product 3</a></li>
                <li><a href="#">Product 4</a></li>
              </ul>
            </li>
            <li>Product Group Heading 2
              <ul>
                <li><a href="#">Product 5</a></li>
                <li><a href="#">Product 6</a></li>
              </ul>
            </li>
            <li>Product Group Heading 3
              <ul>
                <li><a href="#">Product 7</a></li>
                <li><a href="#">Product 8</a></li>
              </ul>
            </li>
            <li>Product Group Heading 4
              <ul>
                <li><a href="#">Product 9</a></li>
                <li><a href="#">Product 10</a></li>
              </ul>
            </li>
            <li>Product Group Heading 5
              <ul>
                <li><a href="#">Product 11</a></li>
              </ul>
            </li>
          </ul>
        </li>
        <li><a href="#">Service</a></li>
        <li><a href="#">Lorem</a></li>
        <li><a href="#">Ipsum</a></li>
        <li><a href="#">Dolor</a></li>
      </ul>
    </nav>

非常感谢任何帮助！

Answer 1

将下面的这段代码添加到 CSS 的末尾，它会起到作用。

nav li ul li ul {
  position: static;
  width: auto; /*extra new*/
}

nav li ul li ul li {
    float: none;
}

http://jsfiddle.net/u0vyezwh/2/

Answer 2

添加到导航栏

{position:relative}

将 nav li ul 更改为 nav > ul > li > ul 因为所有的 ul 都是绝对定位的。 jsfiddle

CSS 下拉菜单：2 列和 Headers

CSS Drop Down Menu: 2 Columns and Headers

html

css

drop-down-menu