Question

我有一个水平显示的一些无序元素的导航，然后我从导航的其中一个元素中有一个子菜单，到目前为止我显示所有元素内联但我想并排显示它们，只是每行两个。

它实际上看起来如何：

我希望如何：

只有两列并排显示元素，与左侧对齐（每边50％宽度）。

但是我无法完成它，这是我到目前为止所得到的

HTML

<nav id="menu">
            <ul>
                <li class="menu1"><a href="">HOME</a></li>
                <li class="left"><a href="">NEWS</a></li>
                <li class="left"><a href="">VIDEOS</a></li>
                <li class="left"><a href="">STYLE</a></li>
                <li class="left"><a href="">BEAUTY</a></li>
                <li class="left"><a href="">MOMS</a></li>
                <li class="left"><a href="">ENTERTAINMENT</a></li>
                <li class="left"><a href="">PETS</a></li>
                <li class="left"><a href="" class="news">NEWS</a>
                    <ul>
                        <li><a href="">Content1</a></li>
                        <li><a href="">Content2</a></li>
                        <li><a href="">Content3</a></li>
                        <li><a href="">Content4</a></li>
                        <li><a href="">Content5</a></li>
                        <li><a href="">Content6</a></li>
                        <li><a href="">Content7</a></li>
                        <li><a href="">Content8</a></li>
                    </ul>
                </li>
        </nav>

CSS

#menu {
position: absolute;
left:80px;
top:50%;
transform: translate(0%,-50%);
-webkit-transform: translate(0%,-50%);
}

#menu ul {
list-style:none;
position:relative;
float:left;
margin:0;
padding:0;
top:50%;
}

#menu ul li {
display: inline;
position: relative;
}

#menu ul li a {
color: #fff;
text-decoration: none;
font-family: 'Cabin', sans-serif;
background-color: ;
position: relative;
padding-top: 12px;
padding-bottom: 10px;
padding-right: 10px;
padding-left: 10px;
transition: background-color 0.2s ease-in-out;
}

#menu ul li a.news {
color:#ec008c;
transition: color 0.2s ease-in-out;
}

#menu ul li a:hover.news {
color: #fff;
}

#menu ul li a:hover {
background-color: #ec008c;
text-decoration: none;
border-bottom: 2px solid #bf1b33;
color: #fff;
}

#menu ul ul
{
display:none;
position:absolute;
top:100%;
right: 0%;
margin-left:0px;
text-align: center;
width: 350px;
line-height: 60px;
margin-top:12px;
background-color: #243641;

}

#menu ul ul.longer {
width: 150px;
}

#menu ul ul li
{
float:none;
width:100%;
background-color: ;
}

#menu ul ul a
{
line-height: 0px;
padding:0px 5px;
width: 100%;
background-color: ;
}

#menu ul li:hover > ul
{
display:block;
}

Answer 1

您可以这样做：

#menu ul ul li
{
    float: left;
    width: 50%;
}

See working demo here

Answer 2

您可以在上一个display: flex上使用ul，并在子项（flex-basis）上设置li宽度。请参阅下面的示例。

#menu ul li:hover > ul {
  display: flex;
  flex-flow: row wrap;
}

#menu ul ul li {
  flex-basis: 50%;
}

这是所有需要的额外代码。我还修复了你的代码。因为<ul>没有封闭标记（</ul>）。

#menu {
  position: absolute;
  left: 80px;
  top: 50%;
  transform: translate(0%, -50%);
  -webkit-transform: translate(0%, -50%);
}

#menu ul {
  list-style: none;
  position: relative;
  float: left;
  margin: 0;
  padding: 0;
  top: 50%;
}

#menu ul li {
  display: inline;
  position: relative;
}

#menu ul li a {
  color: #fff;
  text-decoration: none;
  font-family: 'Cabin', sans-serif;
  background-color: ;
  position: relative;
  padding-top: 12px;
  padding-bottom: 10px;
  padding-right: 10px;
  padding-left: 10px;
  transition: background-color 0.2s ease-in-out;
}

#menu ul li a.news {
  color: #ec008c;
  transition: color 0.2s ease-in-out;
}

#menu ul li a:hover.news {
  color: #fff;
}

#menu ul li a:hover {
  background-color: #ec008c;
  text-decoration: none;
  border-bottom: 2px solid #bf1b33;
  color: #fff;
}

#menu ul ul {
  display: none;
  position: absolute;
  top: 100%;
  right: 0%;
  margin-left: 0px;
  text-align: center;
  width: 350px;
  line-height: 60px;
  margin-top: 12px;
  background-color: #243641;
}

#menu ul ul.longer {
  width: 150px;
}

#menu ul ul li {
  float: none;
  width: 100%;
  background-color: ;
}

#menu ul ul a {
  line-height: 0px;
  padding: 0px 5px;
  width: 100%;
  background-color: ;
}

#menu ul li:hover > ul {
  display: flex;
  flex-flow: row wrap;
}

#menu ul ul li {
  flex-basis: 50%;
}

<nav id="menu">
  <ul>
    <li class="menu1"><a href="">HOME</a></li>
    <li class="left"><a href="">NEWS</a></li>
    <li class="left"><a href="">VIDEOS</a></li>
    <li class="left"><a href="">STYLE</a></li>
    <li class="left"><a href="">BEAUTY</a></li>
    <li class="left"><a href="">MOMS</a></li>
    <li class="left"><a href="">ENTERTAINMENT</a></li>
    <li class="left"><a href="">PETS</a></li>
    <li class="left"><a href="" class="news">NEWS</a>
      <ul>
        <li><a href="">Content1</a></li>
        <li><a href="">Content2</a></li>
        <li><a href="">Content3</a></li>
        <li><a href="">Content4</a></li>
        <li><a href="">Content5</a></li>
        <li><a href="">Content6</a></li>
        <li><a href="">Content7</a></li>
        <li><a href="">Content8</a></li>
      </ul>
    </li>
  </ul>
</nav>

Answer 3

您应在display: inline-block;元素上使用width: 50%宽度#menu ul ul li：

#menu ul ul {
display:none;
position:absolute;
top:100%;
right: 0%;
margin-left:0px;
text-align: center;
width: 350px;
line-height: 60px;
margin-top:12px;
background-color: #243641;
font-size: 0; /* white spaces fix */
}

#menu ul ul li {
font-size: 1rem; /* white spaces fix */
float: none;
width: 50%;
display: inline-block;
background-color: ;
}

#menu ul ul a {
display: block;
padding: 0px 5px;
width: 100%;
background-color: ;
}

JSfiddle here。

Answer 4

这可能对您的需求有用。

我不知道您是否使用任何框架，但这应该适合您：）

http://alijafarian.com/bootstrap-multi-column-dropdown-menu/

如何在每行显示两个下拉列表

4 个答案: