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表示＆＃34;段＆＆＃34;它实际上并非如此。然后将鼠标悬停在列表项上仍将悬停在您的容器上，它会保持扩展状态。

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

水平＆＃34;揭示＆＃34;导航栏无功能

1 个答案: