[問題] 為什麼overflow:hidden反而才出現選單？

[dream1124 (全新開始)]

 大家午安

 想請教一個瀏覽器套用 CSS 規則的問題～

 我正在模仿 W3School How to 這篇製作選單

 https://www.w3schools.com/howto/howto_js_topnav.asp


 現在遇到的問題是如果不在包覆選單的外層元素加上 overflow:hidden，
 那選單除了最左邊的 Home 以外都會沒有背景顏色，一定要照範例做才行

 http://jsbin.com/hapalakaxa/edit?html,css,output

 想請問為什麼會這樣呢？ 有什麼運作規則是我不太清楚的？

 先謝謝大家解惑囉~

 瀏覽器是 Chrome 桌機版 65.0.3325.181（雖然跟這應該沒關係）

--
※ 發信站: 批踢踢實業坊(ptt.cc), 來自: 61.231.183.160
※ 文章網址: https://www.ptt.cc/bbs/Web_Design/M.1522573803.A.030.html
→ Rinorune: https://www.zhihu.com/question/30938856
→ Rinorune: 主要是它的a tag用float 可以搜一下float相關的東西
 已經看完您給的連結了，這種 css 本身的設計思維是比較難掌握的東西，感謝您轉文給我參考！

→ gomay520: 用display:flex;也許更好，盡量不要再用float
→ gomay520: https://tinyurl.com/y7odkflv
 謝謝你的建議，其實我也這樣想
 但是考慮到目前瀏覽器的相容狀況，用 flex 好像還是會有一部分裝置不能正常瀏覽？
※ 編輯: dream1124 (1.169.224.151), 04/06/2018 21:29:31