我的下拉菜單消失後，我可以點擊它

Question

下拉菜單消失，然後你可以點擊一個鏈接。我認爲這是一個與滑塊的confict，但即使我擺脫它，我仍然有問題。該網站是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 */ 
} 

這將意味着你的鏈接文字將其持有的「懸停」狀態，直到光標跨越到菜單上，有點使用填充作爲「橋」。

同樣，這是一個快速和骯髒的修復，我強烈建議大規模的重新工作，但如果你有最後期限，這就是生活。