my drop down menu disappears before i can click on it - css

Question

the drop down menu disappears before you can click on a link. i thought it was a confict with the slider but even if i get rid of it i still have the issue. the site is tourismreddeer.com
here is the html:
<ul class="headerNav">
<a class="btnHome" href="/"><span>Home</span></a>
<li>About Red Deer<img src="/images/link_photo_about.png" width="81" height="81" />
</li>
<li>Events & Attractions<img src="/images/link_photo_events.png" width="81" height="81" />
<ul class="sub-menu sub-events">
<li>Red Deer & Area Events</li>
<li>Business Listings</li>
<li>Mud Hero</li>
</ul>
</li>
<li>Plan Your Trip<img src="/images/link_photo_holiday.png" width="81" height="81" /></li>
<li>Places to Stay<img src="/images/link_photo_accommodations.png" width="81" height="81" /></li>
<li>Meetings & Sports<img src="/images/link_photo_sports.png" width="81" height="81" /></li>
and this is the 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

You have some pretty weird stuff going on inside your CSS. The actual menu bar is sitting up above the web page and the text from them is hanging down using absolute positioning and offsets. I'm not going to bang on about how you should redo a lot of this CSS because you probably know that and you came here for a solution. Here's what I managed:
It's not perfect but it's a tough piece to work with:
Change this selector like so:
.header ul a {
position: absolute;
top: 111px;
padding-bottom:20px; /* <-- this is the new bit */
}
This will mean your link text will hold its 'hover' status until the cursor crosses over onto the menu, kinda using the padding as a "bridge".
Again, this is a quick and dirty fix and I strongly suggest a larger-scale re-work but if you have deadlines, such is life.