为什么锚定标签不显示：块

Question

这是我正在处理的代码笔。 我的代码代码笔

我正在尝试使下拉菜单中的链接达到其所在容器的 100% 宽度。

看看它现在只是一个简短的灰色链接吗？ 我正在尝试使该标签显示块，以便它将填充整个宽度。

我已经将包含 li 设置为显示：内联块，并将锚标记设置为显示：块....

没有骰子。 锚标记不会达到 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>