satır başına aşağı açılan ul iki görüntü nasıl gösterileceği

Question

Yatay olarak görüntülenen bazı sırasız öğelere sahip bir Nav'um var ve ardından nav öğelerinin birinden bir alt menüye sahibim, şu ana kadar tüm öğeleri satır içi görüntülüyorum ama Bunları yan yana göstermek, sadece ikişer satırda göstermek gibi.

Ve bunun nasıl olmasını istediğini:

aslında görünüyor nasıl

(sol tarafına hizalanmış, elemanlarını yan yana görüntülendiği Sadece iki sütun Her tarafta% 50 genişlik).

Ama halletmek olamaz, burada şimdiye kadar

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

Böyle bir şey yapabilirsiniz:

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

See working demo here

Answer 2

Bu ihtiyaçlarınız için yararlı olabilir ne var.

herhangi çerçevesini kullanarak veya değilse bilmiyorum ama bu sizin için çalışması gerekir :)

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

Answer 3

Son ul numaralı telefondan display: flex numaralı telefonu kullanabilirsiniz ve flex-basis wid Çocuklarda inci (li). Aşağıdaki örneğime bakın.

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

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

Bu, ihtiyaç duyulan tüm ekstra kodlardır. Ben de kodunuzu tamir ettim. <ul> kapalı etiketi olmadığından (</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

Sen #menu ul ul li unsurları display: inline-block; genişliği width: 50% kullanmalıdır:

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