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

＆＃13;

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

＆＃13;

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

＆＃13;

非常感谢任何帮助！

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}

将导航更改为导航＆gt; ul＆gt; li> ul 因为所有的uls都是绝对的。 jsfiddle

CSS下拉菜单：2列和标题

2 个答案: