ピュアCSS応答マルチレベルのメニュー

Question

は非常に悪いです：

HTML以外にも、 CSS側では、私は

* third level */ 

#nav li li li{ 
    background-color: #cc470d; 
    display: none; 
    position: absolute; 
    top: 100%; 
} 
#nav li li:hover li { 
    display: block; 
    left: 2px; 
    top:0px; 
    right: 0; 
} 
#nav li:not(:first-child):hover ul li ul li { 
    left: 240px; 
    top:-50px; 
} 
#nav li ul li ul a { 
    font-size: 1.25em; /* 20 */ 
    border-top: 1px solid #e15a1f; 
    padding: 0.75em; /* 15 (20) */ 
} 

#nav li ul li ul li a:hover, #nav li ul li ul:not(:hover) li.active a { 
    background-color: #e15a1f; 
} 

を追加しましたが、それだけでは十分ではありませんし、@mediaバージョンも処理しなければなりません。

は、あなたがそれらを正しく配置する余白を調整、その後、ドロップダウンに一定の幅を適用することができ

Answer 1

を追加するために必要なものを提案してくださいすることができます。

これに第3レベル #nav li li liのためのあなたのコードを変更し

：

/* third level */ 

#nav li li li { 
    background-color: #cc470d; 
    display: none; 
    position: absolute; 
    top: 100%; 
    width: 240px; /* will also set width for child dropdown */ 
    margin-top: -1px; 
    margin-left: 2px; 
} 

を第四のレベルのためにこれを追加します。

/* fourth level */ 

#nav li li li li { 
    margin-left: 1px; 
}