css - 我的下拉菜单在我点击之前就消失了

Question

在您单击链接之前，下拉菜单会消失。我认为这是与 slider 的冲突，但即使我摆脱它，我仍然有问题。该网站是 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:

.btnHome {
position: absolute;
top: 30px !important;
left: 0px;
width: 200px;
height: 115px;
background-image: url(../images/spacer.gif);
}
.header {
position: relative;
top: 0px;
width: 986px;
height: 148px;
background-repeat: no-repeat;
background-position: 0px 95px;
  }
.header ul {
font-family: 'PT Sans Narrow', arial, serif;
color: #fff;
font-size: 17px;
list-style: none;
margin: 0px;
padding: 0px;
}
.header a {
color: #fff;  
}
.header ul a {
  position: absolute;
  top: 111px;  
}
.linkGreen {
  left: 242px;
}
.linkBlue {
  left: 395px;
}
.linkPurple {
  left: 545px;
}
.linkBrown {
  left: 695px;
}
.linkYellow {
  left: 843px;
}
.header ul a img {
  position: absolute;
  top: -78px;
  left: 14px;  
}
.headerLinks {
  position: absolute;
  top: 0px;
  right: 0px;
  font-family: 'PT Sans Narrow', arial, serif;
  color: #fff;
  font-size: 14px;
  width: 320px;
  height: 28px;
  padding: 7px 0px 0px 0px;
}
.headerLinks a {
  padding: 0px 4px 0px 4px;
 }
.headerLinkConsumer {
   position: absolute;
   top: 0px;
   right: 83px;
   width: 86px;
   height: 34px;
   background-image: url(../images/link_header_consumer_lo.png);
   background-repeat: no-repeat;
 }
.headerLinkConsumer:hover, .headerLinkConsumer.current {
  background-image: url(../images/link_header_consumer.png);  
}
.headerLinkIndustry {
  position: absolute;
  top: 0px;
  right: -3px;
  width: 86px;
  height: 34px;
  background-image: url(../images/link_header_industry_lo.png);
  background-repeat: no-repeat;  
}
.headerLinkIndustry:hover, .headerLinkIndustry.current {
  background-image: url(../images/link_header_industry.png);  
}
.headerShadow {
   position: absolute;
   right: 0px;
   top: 95px;  
}
.headerLogo {
   position: absolute;
   left: 0px;
   top: 27px;  
}
.headerLogoSide {
   position: absolute;
   left: -24px;
   top: 43px;  
}

ul.headerNav ul {display: none;}
ul.headerNav li:hover > ul {
display: block;}

ul.headerNav li a:hover > ul li {
display: block;}

ul.headerNav li:hover > ul.sub-events {
margin: 148px 0 0 375px;}

.headerNav .sub-menu {
 position:absolute;
 z-index:12000;
 display:none;
 background:#999999 !important;
 padding:5px 15px;
 -webkit-box-shadow:1px 1px 2px 0px rgba(0, 0, 0, 0.2);
 -moz-box-shadow:1px 1px 2px 0px rgba(0, 0, 0, 0.2);
      box-shadow:1px 1px 2px 0px rgba(0, 0, 0, 0.2);
 -webkit-border-radius:0px 0px 3px 3px;
 -moz-border-radius:0px 0px 3px 3px;
      border-radius:0px 0px 3px 3px;
 border-top:3px solid #555555;
}

.headerNav .sub-menu li {
    display: block !important;
    margin: 0 !important;
    padding: 0 !important;
    height: auto !important;
    border-bottom: 1px solid #a5a5a5;
    border-left: none !important;
}

  .headerNav .sub-menu li a{
  height: auto !important;
  line-height: 1 !important;
  padding:10px 0 !important;
}

    html body .headerNav .sub-menu li a,
    html body .headerNav .sub-menu li .sub-menu li a,
    html body .headerNav .sub-menu li .sub-menu li .sub-menu li a {
        border: none !important;
        display: block !important;
        width: 160px;
        margin: 0 !important;
        padding: 8px 0px !important;
        color: #dedede;
        line-height: normal;
        font-weight: normal !important;
        height: auto;
        background: none !important;
        position:inherit;
    }

    .headerNav .sub-menu li a:hover,
    .headerNav .sub-menu li .sub-menu li a:hover,
    .headerNav .sub-menu li.current-menu-item a,
    .headerNav .sub-menu li.current-menu-item a:hover,
    .headerNav .sub-menu li.current_page_item a,
    .headerNav .sub-menu li.current_page_item a:hover {
        color: #ffffff !important;
        font-weight: normal;
    }

.headerNav .sub-menu li:last-child{ 
  border: none;
}

.headerNav .sub-menu li ul {
    top: -1px !important;
    left: 178px !important;
    border-top: none;
    -webkit-border-radius:3px;
   -moz-border-radius:3px;
        border-radius:3px;
}

Answer 1

您的 CSS 中发生了一些非常奇怪的事情。实际的菜单栏位于网页上方，其中的文本使用绝对定位和偏移垂下。我不会大谈你应该如何重做很多这个 CSS，因为你可能知道这一点并且你来这里是为了寻求解决方案。这是我管理的内容:

它并不完美，但很难使用:

像这样改变这个选择器:

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

这意味着您的链接文本将保持其“悬停”状态，直到光标越过菜单，有点像使用填充作为“桥梁”。

同样，这是一个快速而肮脏的修复，我强烈建议进行更大规模的返工，但如果你有最后期限，那就是生活。