versucht, eine Sidebar mit CSS zu machen, aber kann es nicht Drop-Linie nach jeder Taste

Question

Mein Problem ist, dass 2 Tasten (eigentlich Text, der eine Verbindung ist) in einer Zeile erscheinen. Ich möchte, dass nur ein Link in einer Zeile steht. Also ich werde 10 Zeilen statt 8 haben. Übrigens läuft dieses Ding auf einem WordPress Theme.

the sidebar

der CSS-Code:

.menu { 
    width: 100%; 
    height: 55px; 
    font-family: "Raleway", "Helvetica Neue", Helvetica, Arial, sans-serif; 

} 
.menu li a { 
    font-size: 11px; 
    text-transform: uppercase; 
    font-weight: 600; 
    letter-spacing: 1px; 
    color: #0e1015; 
    opacity: 0.5; 
    transition: all 0.3s ease; 
    -webkit-transition: all 0.3s ease; 
    -moz-transition: all 0.3s ease; 
    max-width: 100%; 
    white-space: normal; 

} 
.menu li a:hover { 
    opacity: 1 !important; 
} 
.menu > li { 
    margin-right: 32px; 
    float: left; 
    position: relative; 
    transition: all 0.3s ease; 
    -webkit-transition: all 0.3s ease; 
    -moz-transition: all 0.3s ease; 
    opacity: 1; 
} 
.menu > li:last-child { 
    margin-right: 0; 
} 
.menu > li ul { 
    left: 0; 
    width: 200px; 
    padding: 0; 
    background: #0e1015; 
    position: absolute; 
    z-index: 99; 
    top: 100%; 
    opacity: 0; 
    transition: all 0.3s ease; 
    -webkit-transition: all 0.3s ease; 
    -moz-transition: all 0.3s ease; 
    transform: translate3d(0, 10px, 0); 
    -webkit-transform: translate3d(0, 10px, 0); 
    -moz-transform: translate3d(0, 10px, 0); 
    visibility: hidden; 
    margin-top: -1px; 
} 
.menu > li > ul > li { 
    position: relative; 
    line-height: 24px; 
    width: 100%; 
    vertical-align: top; 
} 
.menu > li > ul > .dropdown:after { 
    color: #0e1015; 
    top: 1px; 
    right: 24px; 
    content: "\f105"; 
} 
.menu > li > ul li a { 
    color: #fff; 
    height: auto; 
    padding: 6px 24px; 
} 
.menu > li > ul > li > ul { 
    left: 100%; 
    top: 0; 
} 
.menu > li:hover > ul { 
    opacity: 1; 
    transform: translate3d(0, 0px, 0); 
    -webkit-transform: translate3d(0, 0px, 0); 
    -moz-transform: translate3d(0, 0px, 0); 
    visibility: visible; 
} 
.menu > li > ul > li:hover > ul { 
    opacity: 1; 
    transform: translate3d(0, 0px, 0); 
    -webkit-transform: translate3d(0, 0px, 0); 
    -moz-transform: translate3d(0, 0px, 0); 
    visibility: visible; 
} 

Answer 1

die float: left; aus der Liste Elemente entfernen.

.menu > li { 
    margin-right: 32px; 
    position: relative; 
    transition: all 0.3s ease; 
    -webkit-transition: all 0.3s ease; 
    -moz-transition: all 0.3s ease; 
    opacity: 1; 
} 

Answer 2

Bitte entfernen Schwimmer: links; von einem Element; sie werden automatisch eine unter anderen