I've been struggling to get the latest Superfish menu code working with lists that include the <a> tag. I've double-checked everything, but it seems like I'm missing something obvious. Can anyone help me figure out what's wrong?
Here is the HTML code I'm using:
<!DOCTYPE html>
<html>
<head>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<meta charset="utf-8>
<title>JS Bin</title>
<script src="http://vbpmonitor.com/templates/vbpmonitor/js/superfish.js"></script>
<script src="http://vbpmonitor.com/templates/vbpmonitor/js/hoverIntent.js"> </script>
<script type="text/javascript">
jQuery(document).ready(function() {
jQuery('ul.sf-menu').superfish({
delay: 800,
animation: {opacity:'show'},
animationOut: {opacity:'hide'},
speed: 'normal',
speedOut: 'fast',
disableHI: true,
});
});
</script>
</head>
<body>
<nav class="navbar">
<ul class="sf-menu">
<li><a href="#">Link 1</a>
<ul>
<li><a href="#">Sublink 1</a><li>
<li><a href="#">Sublink 2</a></li>
<li><a href="#">Sublink 3</a></li>
</ul>
</li>
<li><a href="#">Link 2</a></li>
<li><a href="#">Link 3</a></li>
</ul>
</nav>
</body>
</html>
This is the CSS code:
.navbar {
float: left;
width: 100%;
height: 50px;
background: #cc3333;
}
nav > ul {
margin: 0;
padding: 0;
list-style-type: none;
}
nav > ul > li {
float: left;
margin: 0;
}
nav > ul > li > a {
display: block;
padding: 17px 20px;
color: #fff;
text-decoration: none;
}
nav ul ul li a {
width: 200px;
display: block;
padding: 10px 15px;
text-decoration: none;
color: #fff;
}
/*** ESSENTIAL STYLES ***/
.sf-menu li {
position: relative;
}
.sf-menu ul {
position: absolute;
display: none;
top: 100%;
left: 0;
z-index: 99;
list-style-type:none;
}
.sf-menu > li {
float: left;
}
.sf-menu li:hover ul,
.sf-menu li.sfHover ul {
display: block;
}
.sf-menu a {
display: block;
position: relative;
}
.sf-menu ul ul {
top: 0;
left: 100%;
}
You can view and test the code on JSbin by clicking on this link: http://jsbin.com/mituwuxupi/1/