Css 我的下拉菜单在我点击它之前消失了

单击链接之前，下拉菜单将消失。我认为这是一个与滑块冲突，但即使我摆脱它，我仍然有问题。该网站是tourismreddeer.com

以下是html：

<ul class="headerNav">
<a class="btnHome" href="/"><span>Home</span></a>
<li><a href="/about-red-deer.aspx" class="linkGreen">About Red Deer<img src="/images/link_photo_about.png" width="81" height="81" /></a>
</li>
<li><a href="/events-attractions.aspx" class="linkBlue">Events &#38; Attractions<img src="/images/link_photo_events.png" width="81" height="81" /></a>
  <ul class="sub-menu sub-events">
    <li><a href="http://www.tourismreddeer.com/events-attractions/events.aspx">Red Deer &#38; Area Events</a></li>
    <li><a href="http://www.tourismreddeer.com/events-attractions/business-listings.aspx">Business Listings</a></li>
    <li><a href="http://www.tourismreddeer.com/events-attractions/mud-hero.aspx">Mud Hero</a></li>
  </ul>
</li>
<li><a href="/holiday-planning.aspx" class="linkPurple">Plan Your Trip<img src="/images/link_photo_holiday.png" width="81" height="81" /></a></li>
<li><a href="/accommodations.aspx?search=1&accType=Hotel" class="linkBrown">Places to Stay<img src="/images/link_photo_accommodations.png" width="81" height="81" /></a></li>
<li><a href="/sport-meetings.aspx" class="linkYellow">Meetings &amp; Sports<img src="/images/link_photo_sports.png" width="81" height="81" /></a></li>

---

你的CSS中有一些非常奇怪的东西。实际的菜单栏位于网页上方，其中的文本通过绝对定位和偏移垂下。我不打算喋喋不休地谈论你应该如何重做这些CSS，因为你可能知道这一点，你来这里是为了一个解决方案。以下是我所做的：

它并不完美，但很难处理：

更改此选择器，如下所示：

.header ul a {
  position: absolute;
  top: 111px;
  padding-bottom:20px;  /* <-- this is the new bit */
}

。标题ul a{
位置：绝对位置；
顶部：111px；
填充底部：20px；/*您的HTML结构似乎很好，但是…在元素上使用
position:absolute
是一个不好的方法来获取您想要的内容。编辑HTML无效第一个标记不在li元素内创建一个提琴，我假设它的位置也是：absolute；如果您检查站点上的headerNav和菜单的列表项他们的高度都是0，我想这就是为什么一旦你离开链接文本，菜单就会消失的原因。一旦你不再在链接上悬停，你也不再在列表项上悬停。我认为高度问题是由使用
位置：绝对
引起的。当你有一个到实时站点的链接时，谁需要小提琴呢！谢谢你的快速fix！我知道css很恶心-除了下拉菜单的css之外，我没有写任何东西。它也可以帮助其他方面，我在第一个菜单上添加了与孩子们冲突的填充。删除它有帮助。
.header ul a {
  position: absolute;
  top: 111px;
  padding-bottom:20px;  /* <-- this is the new bit */
}