CSSでサイドバーを作成しようとしましたが、各ボタンの後にドロップラインを作成しません。

Question

私の問題は、2つのボタン（実際にはリンクのテキスト）が1行に表示されていることです。私は、1つのリンクだけが行に入りたいと思っています。 だから私は8の代わりに10行を持っています。 ところで、このことはWordPressテーマで実行されています。

the sidebar

CSSコード：

.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

あなたのリスト項目からfloat: left;を削除します。

.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

float：leftを削除してください。 li要素から;彼らは自動的に他の1つ下に来るでしょう