html - CSSで拡張可能なナビゲーションバー?

Question

拡大するナビゲーション バーを作成しようとしていますが、かなり進んでいますが、初心者であり、現在はたわごとのように見えます。

ちょっと手伝ってくれませんか？JSについて何も知らないので、純粋なCSSでやりたいです。

<div id="blackbox" />
<div id="blacktxt">Navigation</div>
<nav>
    <ul>
        <li><a href="About">About</a>

            <ul>
                <li><a href="abfin">About Finland</a>
                </li>
                <li><a href="#">About Us</a>
                </li>
        </li>
        </ul>
        </div>

書くのは難しすぎます。青写真は次のとおりです。

設計図

そして、ここに既存のコードがあります：

コード