響應導航欄：子項目重疊Itembar

Question

介紹clearify任務

我有我的頁面左側的導航欄。它有兩個等級的物品。當它顯示在一個小設備上時，只顯示第一層的圖標。如果您將鼠標懸停在其上，則會在該欄的右側顯示子項的下拉列表。到現在爲止還挺好。

當用戶使用普通設備一級項應顯示爲下拉報頭和子項上點擊其父項下應擴大。所以我計劃在height: 0px;的主要項目下設置子項目容器，並用javascript-onclick和css轉換來實現它。

但你可以看到分項上空盤旋的主要議題。

問題

我怎麼能保證subitemlist是主項之間，而不是過了嗎？ 此外，解決方案不應該破壞Responsivness。

注意：我真的想製作自己的導航欄，所以使用Bootstrap不是一個選項。如果代碼不是最好的，我也很抱歉，這是第一次嘗試。

代碼

I have put the whole thing in a jsfiddle

Answer 1

你不能把它放在你sidebaritem必須把它它下面