badams1 - 4:13 pm on Sep 11, 2012 (gmt 0)

I'm not entirely sure this is a css issue, it may be javascript. Anyways, I just came into this project, the code was already written but we noticed a problem. When you click anywhere in the menu it turns the whole thing gold, you can't see any of the links within that section of the menu. You can click on it again and it will return back to the normal state. This only happens in Internet Explorer 9 and Chrome. Internet Explorer 8 runs the site in mobile mode, but I think that is another problem that can be dealt with. No problems in Firefox.

I wasn't sure if a image displaying the problem is allowed so I didn't put it in here (but it can be seen from my profile).


CSS
/* Buttonbar
---------------------------------- */

#buttonbar {
background: transparent url(/files/images/bbbackground.png) repeat-x;
height: 35px;
width: 93.75%;
margin-bottom: 10px;
overflow:hidden;
display:block;
position:relative;
margin: 0px 3.75% 1.669% 3.125%;
padding; 0;
}

#bar
{
width: 100%;
margin: 0 auto;
padding: 0;

}


#bar a,
#bar a:visited
#bar a:active {
color: #000;
}
#bar li {
display:block;
color:#000;
line-height: 35px;
font-size: .7em;
font-weight: bold;
text-decoration: none;
text-transform: uppercase;
text-align: center;
float:left;
position:relative;
width: 14.25%;
}


#bar li ul {
position:absolute;
margin: 0;
padding: 0;
width: 100%;
min-width: 128px;
overflow:hidden;

}

#bar li#prospective li ,
#bar li#students li,
#bar li#academics li,
#bar li#facstaff li,
#bar li#parents li,
#bar li#alumni li,
#bar li#visitors li{
float:none;
background-color:#fef0b7;
background-image:none;
text-indent:0;
overflow:hidden;
font-size: .9em;
line-height: 1.5em;
padding: 3px;
text-transform: none;
text-align: left;
margin: 0;
list-type: none;
font-weight: normal;
width: 150%;
min-width: 128px;
border-left: thin solid #ffffff;

}
#bar li li a:hover {
text-decoration: underline;
}

#bar li#prospective li.last-item,
#bar li#students li.last-item,
#bar li#academics li.last-item,
#bar li#facstaff li.last-item,
#bar li#parents li.last-item,
#bar li#alumni li.last-item,
#bar li#visitors li.last-item {
background-color: #ffc426;
font-weight: bold;
}
#togglemenu {
display: none;
}
#bar li#quicklinks {
display: none;
}

#bar a.nolink:hover {
text-decoration: none;
}


html (html 5 doctype)

<li id="prospective" class="rightborder" onclick="javascript:showElement('prospective-links')">Future Students
<ul id="prospective-links">
<li><a href="/admissions">Undergraduate Admissions</a></li></ul>...

just in case the javascript is needed
function showHide() {
var s=document.getElementById("buttonbar").style;
if ($(window).width() > 949) {
s.display = "block";
document.getElementById("prospective-links").style.display = "block";
document.getElementById("current-links").style.display = "block";
document.getElementById("academic-links").style.display = "block";
document.getElementById("facstaff-links").style.display = "block";
document.getElementById("parent-links").style.display = "block";
document.getElementById("alumni-links").style.display = "block";
document.getElementById("visitor-links").style.display = "block";
$("#accordion").accordion('destroy');
$("#buttonbar").unbind('mouseenter');
$("#buttonbar").unbind('mouseleave');
$.fn.pause=function(a){$(this).stop().animate({dummy:1},a);return this};
function mouseleft(){$("#buttonbar").triggerHandler("mouseleave")}
$(document).ready(function()
{$("#buttonbar").mouseenter(function(){$(this).stop().pause(160).animate({height:"12.7em"},400,"easeOutQuart")}).mouseleave(function(){$(this).stop().pause(160).animate({height:"2.2em"},400,"easeOutQuart")});});$(function(){$("#accordion").accordion({fillSpace:!0,icons:{header:"accordion-header",headerSelected:"accordion-headerselected"}})});
if((navigator.userAgent.match(/iPhone/i)) || (navigator.userAgent.match(/iPod/i)) || (navigator.userAgent.match(/iPad/i))) {
$("#buttonbar li").bind('touchstart', function(){
console.log("touch started");
});
$("#buttonbar li").bind('touchend', function(){
console.log("touch ended");
});
}

}
else {
/*$("#accordion").accordion({active:false});*/
$("#accordion").accordion('destroy');
$("#buttonbar").unbind('mouseenter');
$("#buttonbar").unbind('mouseleave');
$("#buttonbar li").unbind('touchstart');
$("#buttonbar li").unbind('touchend');

s.display = "none";
document.getElementById("prospective-links").style.display = "none";
document.getElementById("current-links").style.display = "none";
document.getElementById("academic-links").style.display = "none";
document.getElementById("facstaff-links").style.display = "none";
document.getElementById("parent-links").style.display = "none";
document.getElementById("alumni-links").style.display = "none";
document.getElementById("visitor-links").style.display = "none";
/*$("#buttonbar").accordion('destroy');*/

}

}
Thanks