I've noticed an odd problem when using Superfish, and I'm not very experienced with jQuery, so I'm not sure if I'm doing something wrong. I have a sub-menu that pops up, and when I click a link in that sub-menu, it goes to the linked page as I'd expect. However, when I click the browser's Back button, it goes back to the previous page with the menu popped open. To make it close, I have to put the cursor back over the menu, then move it off again. Anybody know how I can fix this?
<ul class="sf-menu sf-vertical">
<li class="selectedNavItem"><a href="/index.html">About Us</a></li>
<li><a href="/staff/">Our Professionals</a>
<ul>
<li><a href="/staff/kuchnir.html">Louis Kuchnir, MD</a></li>
<li><a href="/staff/donohue.html">Kevin Donohue, MD</a></li>
<li><a href="/staff/schanbacher.html">Carl Schanbacher, MD</a></li>
<li><a href="/staff/bush.html">Michelle Bush, MD</a></li>
<li><a href="/staff/white.html">Kathy White, DO</a></li>
<li><a href="/staff/starr.html">Barbara Starr, NP</a></li>
</ul>
</li>
<li><a href="/services/">Services</a></li>
<li><a href="/offices/">Offices</a></li>
<li><a href="/forms/">Forms</a></li>
</ul>
The header stuff with all the scripts:
<link rel="stylesheet" type="text/css" href="/css/superfish.css" />
<link rel="stylesheet" type="text/css" href="/css/superfish-vertical.css" />
<link href="/css/kdds.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="/js/jquery-1.4.min.js"></script>
<script type="text/javascript" src="/js/hoverIntent.js"></script>
<script type="text/javascript" src="/js/superfish.js"></script>
<script type="text/javascript" src="/js/jquery.cross-slide.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("ul.sf-menu").superfish({
animation:
{height: 'show'},
delay:
500
});
});
</script>
The custom CSS I'm using is:
.sf-menu
{
margin-bottom: 1px;
}
.sf-vertical, .sf-vertical li
{
width: 300px;
}
.sf-vertical li.sfHover ul
{
left: 300px;
}
.selectedNavItem
{
background:
#f6971f !important;
font-weight:
bold;
}
.sf-menu li
{
background: #28a8fb;
}
.sf-menu li li
{
background: #1773f7;
}
.sf-menu li:hover, .sf-menu li.sfHover,
.sf-menu a:focus, .sf-menu a:hover, .sf-menu a:active
{
background: #3fd5fa;
}