html - 水平 "Revealing"导航栏不起作用

Question

我正在尝试创建一个导航栏，当用户将鼠标悬停在 p 元素上时，它会显示导航链接。
想法是让p元素的边框扩展到页面的末尾，
并显示所述导航链接。
我遇到的问题是，当我将鼠标从单词中移开时
在 p 元素中，边框移回原来的位置。
所以基本上导航链接会消失，因为它们的出现是由悬停在 p 元素上触发的。

所以我的问题是，如何让 p 元素的边框保持展开状态
当我去选择一个链接时？

在此先感谢您提供的所有帮助/建议。

HTML:

<nav>
<p>Navigate:</p>

<ul id="inner">
 <li><a href="#">Home</a></li>
 <li><a id="yourcomp" href="#">Your Comp</a></li>
 <li id="spec"><a href="#">Spec Spec</a></li>
 <li><a href="#">Contact</a></li>
</ul>

</nav>

CSS

nav p {
font-family: 'Raleway', sans-serif;
font-size: 1.6em;
font-weight: 100;
color: #333333;
padding-top: 17px;
padding-left: 7px;
height: 50px;
border: 4px solid #4a4a4a;
border-top: none;
border-bottom: none;
border-top-left-radius: 10px;
border-top-right-radius: 10px;
border-bottom-left-radius: 10px;
border-bottom-right-radius: 10px;
width: 60px;
transition-property: width;
transition-duration: 1s;
}

nav p:hover {
width: 98%;
}

(为了不让这篇文章太长，我没有添加ul和li的css)

Answer 1

为什么不直接将 ul 放在 p 中(并从中创建一个 div，因为 p 表示“段落”，但实际上不是)。然后将鼠标悬停在列表项上仍将悬停在您的容器上，它保持展开状态。

要在菜单未展开时隐藏元素列表，您可以轻松地将 overflow: hidden; 应用于容器，因此不显示任何不适合的内容。