css - 子が表示されると最上位のメニュー項目が滑り落ちる

Question

こんにちは メニューを作りました。上部の固定メニューの下にある黒い醜いものです。ここまたは私のウェブサイトでアクセスした任意のページで表示できます。チャット ニュース ライフスタイル QI ホーム ライフ スポーツ テック メニュー項目があるものです。

一部のアイテムには子メニューアイテムがあります。「スポーツ」項目をクリックすると、最もよく表示されます。実際、現時点で子アイテムを持つのはそれだけです。

ご覧のとおり、スポーツをクリックすると「tech」メニュー項目が一番下に落ちて、子供たちが表示されます。一番上のmemuアイテムが常に一番上にとどまるように、誰かが私に修正を提案できますか?

「アイスホッケー」の下の「スポーツ」をさらに詳しく調べる場合は、「アメリカン フットボール」への一時的なリンクがあります。私はそれが 3 番目の層にとどまり、上位 2 つのエラー層がかなり座っていることを望んでいました。

誰でも私を助けてくれませんか？私はしばらくそれをいじっていましたが、ついに敗北を認めなければなりません.

ありがとう

#block-menu-menu-categories ul {
    text-align: center;
}


#block-menu-menu-categories ul li {
    background: none repeat scroll 0 0 black;
    border-radius: 4px 4px 4px 4px;
    display: inline;
    list-style: none outside none;
    padding: 2px 5px;
}

menu, ol, ul, .item-list ul {
    padding: 0 0 0 30px;
}