為什么錨標簽不顯示：block

Question

這是我正在研究的代碼筆。 CodePen 用於我的代碼

我試圖將下拉菜單中的鏈接設為其所在容器的 100% 寬度。

看到它現在只是一個簡短的灰色鏈接嗎？ 我正在嘗試制作該標簽顯示塊，以便它填充整個寬度。

我已將包含 li 設置為 display:inline-block 並將錨標記設置為 display:block ....

沒有骰子。 錨標簽不會達到 100% 的寬度。

有小費嗎？

這是 HTML 代碼：

 <ul> <li><a href="#">Link One</a></li> <li><a href="#">Hover Link</a> <ul><li><a href="#">I should be 100%</a></li></ul> </li> <li><a href="#">Link Three</a</li> </ul>

這是css代碼：

 ul { list-style-type: none; padding: 0px; } li { display: inline-block; position: relative; max-width: 200px; padding: 15px 12px; } ul li a { display: block; font-family: "Amiko",sans-serif; font-size: 15px; text-decoration: none; color #428bca; } ul li a:hover { background-color: black; } li ul { position: absolute; display: none; padding: 10px 0; margin-top: 13px; background-color: #fff; border-top: 3px solid #a1c5e5; font-size: 14px; width: 240px; z-index: 1000; -moz-box-shadow: 0 1px 20px rgba(0,0,0,0.15); -webkit-box-shadow: 0 1px 20px rgba(0,0,0,0.15); box-shadow: 0 1px 20px rgba(0,0,0,0.15); } ul li:hover ul { display: block; }

Answer 1

 ul { list-style-type: none; padding: 0px; } li { display: inline-block; position: relative; max-width: 200px; padding: 15px 12px; } ul li a { display: block; font-family: "Amiko",sans-serif; font-size: 15px; text-decoration: none; color #428bca; } ul li a:hover { background-color: black; } li ul { position: absolute; left:-98px; display: none; padding: 10px 0; margin-top: 13px; background-color: #fff; border-top: 3px solid #a1c5e5; font-size: 14px; width: 100vw; z-index: 1000; -moz-box-shadow: 0 1px 20px rgba(0,0,0,0.15); -webkit-box-shadow: 0 1px 20px rgba(0,0,0,0.15); box-shadow: 0 1px 20px rgba(0,0,0,0.15); } ul li:hover ul { display: block; }

 <ul> <li><a href="#">Link One</a></li> <li><a href="#">Hover Link</a> <ul><li><a href="#">I should be 100%</a></li></ul> </li> <li><a href="#">Link Three</a</li> </ul>