html - ナビゲーション メニューのドロップダウンを取得して、基本的なメニュー項目と同じように表示します

Question

私はこのCSSメニューを持っています:

http://jsfiddle.net/7JC8t/

「inostranstvo」の上にマウスを置くと、その下にドロップダウンが表示されます。私がやろうとしているが失敗しているのは、ドロップダウン項目を水平メニューの項目のように見せることです。

したがって、ユーザーが「inostranstvo」にカーソルを合わせると、既存のメニュー項目と同じ幅 (最も広い項目の幅)、同じ高さ、背景の項目が表示されるはずです。

背景は簡単ですが、高さを強制できず、幅を揃える方法がわかりません。これは何もしません:

#nav li:hover ul li{
    height:55px;
    line-height:55px;
    width:200px;
}

幅の値はランダムです。最も重要なのは高さです。これをリスト項目に強制することはできないようです。一方、ボーダーの追加は機能しますが、赤い背景領域内に追加されます。これは複雑なことではないと確信していますが、理解できません。

Answer 1

サブメニューの li 要素を「display-type: block」に設定しようとしましたか?

次のcssをJSFiddleに追加しましたが、うまくいくようです:

#nav li:hover ul li {
    display: block;
    background: #DE2211;
    border-bottom: 1px solid black;
}