行ごとに2つのドロップダウンulを表示する方法

Question

いくつかの順序付けられていない要素が水平に表示されているナビゲーションを持っていて、ナビゲーションのこれらの要素のサブメニューがあります。それらを並べて表示するように、1行に2つだけ表示します。

をそして私はそれになりたい方法：

それが実際にどのように見えるか

（の左側に揃え、要素を並べて表示するだけで2列幅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

です。

あなたが任意のフレームワークを使用したりしていない場合、私は知りませんが、これはあなたのために働く必要があります:)

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

Answer 3

最後にulにdisplay: flexを使用し、flex-basisをwidに設定できます（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 4

あなたは#menu ul ul li要素にdisplay: inline-block;幅width: 50%を使用する必要があります。

#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を。