wie eine Dropdown-Liste ul zwei pro Zeile

Ich habe ein Nav mit einigen ungeordneten Elemente horizontal angezeigt und dann habe ich ein Untermenü von einem dieser Elemente des Nav, bis jetzt zeige ich alle Elemente inline, aber ich würde Ich mag es, sie nebeneinander zu zeigen, nur zwei pro Linie.wie eine Dropdown-Liste ul zwei pro Zeile

Wie sieht es eigentlich:

Und wie ich will es sein:

Nur zwei Spalten Elemente nebeneinander ausgerichtet auf die linke Seite (von 50% Breite auf jeder Seite).

Aber ich kann es nicht getan, hier ist was ich für Ihre Bedürfnisse

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

Quelle

2016-03-30 Eugenio

Sie können etwas tun:

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

See working demo here

Quelle

2016-03-30 10:28:33 Eria

wow du bist super @Eria !!!! Danksagungen es funktioniert! – Eugenio

Es ist vielleicht nicht die einzige Lösung, aber auch nicht die bessere. Es ist nur die schnellste auf Ihrem aktuellen Code basiert. Sehen Sie sich die anderen Lösungen an, die von oboshto und Roy vorgeschlagen wurden, nur damit Sie wissen, dass sie existieren und vielleicht die Art und Weise überdenken, wie Sie Ihr Menü gestaltet haben. – Eria

danke, und es gibt einen Weg, mehr Elemente in dieser ul ul-Liste zu nähern?Ich meine, ich ändere die Polsterung, aber zeige sie mit viel Platz :( – Eugenio

-4

Dies könnte nützlich sein, so weit gekommen.

Ich weiß nicht, ob Sie einen Rahmen oder nicht verwenden, aber dies sollte für Sie arbeiten :)

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

Quelle

2016-03-30 10:27:16 RasmusGlenvig

dies ist keine antwort nur ein link – DanyCode

Sie können display: flex auf der letzten ul verwenden und eine flex-basis wid th an den Kindern (li). Siehe mein Beispiel unten.

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

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

Dies ist alles zusätzliche Code, der benötigt wird. Ich habe auch deinen Code repariert. weil das <ul> nicht geschlossen hatte (</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>

Quelle

2016-03-30 10:30:51 Roy

Sie sollten display: inline-block; Breite width: 50% auf #menu ul ul li Elemente verwenden:

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

Quelle

2016-03-30 10:31:21 oboshto

wie eine Dropdown-Liste ul zwei pro Zeile

Antwort

Verwandte Themen