Hello,
I am developing a website and i was trying to set up a superfish menu.
- The link on my <li class=“sub-menu”> does not work on the first left click of the mouse, it opens on the second click though.
- Links related to sub-menu items do not work at all, if I click once they do not open, if I click a second time, the link related to my <li class="sub-menu> opens.
This is my superfish.js
@import url(http://fonts.googleapis.com/css?family=Anton);
nav{position:relative;margin:27px 10px 1px 10px;
}.sf-menu ul{
position:absolute;top:-999px;
display:none;
}.sf-menu ul li{
width:100%
}.sf-menu li{
float: left;
position: relative;
font-family: 'Anton',sans-serif;
width: 188px;
background: #14361d;
text-transform: uppercase;
z-index: 1;
-moz-transition: all 0.4s ease;
-webkit-transition: all 0.4s ease;
-o-transition: all 0.4s ease;
}.sf-menu li.sub-menu:after{
display: block;
position: absolute;
content:'';
width: 5px;
height: 5px;
top: 50%;
left: 70%;
margin-top: -1px;
background: url(../images/i.png) 0 0 no-repeat;
}.sf-menu li:first-child{
width: 188px;
}.sf-menu li:first-child>strong{display:none;
}.sf-menu>li>a{
display: block;
text-align: center;
position: relative;
font-size: 20px;
line-height: 1.2em;
padding: 32px 0 32px 0;
color: #fff;
overflow: hidden;
}.sf-menu li a strong{
display: block;
position: absolute;
width: 100%;
top: 0;
left: -100%;
right: 0;
bottom: 0;
z-index: -1;
background: #206c15;
-moz-transition: all 0.4s ease;
-webkit-transition: all 0.4s ease;
-o-transition: all 0.3s ease;
}.sf-menu>li a:hover strong,.sf-menu>li.current a strong,.sf-menu>li.sfHover a strong{display:block;top:0;left:0;right:0;bottom:0;
}.sf-menu>li:hover>strong,.sf-menu>li.current>strong,.sf-menu>li.sfHover>strong{display:none;
}.sf-menu>li,.sf-menu>li.current,.sf-menu>li.sfHover{}.sf-menu>li>a:hover,.sf-menu>li.current>a,.sf-menu>li.sfHover>a{text-decoration:none;
}.sf-menu>li>ul,.sf-menu>li.sfHover>ul{
left: 20px;
top: 87px;
width: 126px;
padding: 25px 0 25px 0;
z-index: 99;
background: #14361d;
}.sf-menu>li>ul>li{display:block;width:100%;text-align:left;padding:4px 0 4px 27px;background:none;font-family:Arial,Helvetica,sans-serif;position:relative;}.sf-menu>li>ul>li>a{
font-size: 10px;
line-height: 20px;
display: inline-block;
color: #FFF;
}.sf-menu li li a:hover,.sf-menu li.sfHover li.sfHover>a{
color: #206c15;
text-decoration: none;
}.sf-menu li.sfHover li.sfHover:after{display:block;position:absolute;content:'';width:5px;height:9px;content:'';left:166px;top:15px;
}@media only screen and (max-width: 995px) {.sf-menu li{
width: 149px;
}.sf-menu>li:first-child{
width: 152px;
}.sf-menu>li>a{}}@media only screen and (max-width: 767px) {nav{float:none;font:12px/15px Arial,Helvetica,sans-serif;text-transform:uppercase;color:#fff;padding:8px 3px 5px 3px;margin:13px 10px 0 10px;border-radius:4px;display:block;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;
}nav:before{content:'Menu:';display:none;margin-bottom:5px;
}.sf-menu{display:none;}nav select{
font: 12px/15px Arial,Helvetica,sans-serif;
color: #b4bb92;
outline: none;
border: 2px solid #9e9e9e;
border-radius: 3px;
display: block!important;
width: 100%;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}@media only screen and (max-width: 479px) {}
And this is the piece of HTML
<ul class="sf-menu">
<li class="current"><strong></strong><a href="index.html"><strong></strong>Home</a>
</li>
<li class="sub-menu"><strong></strong><a href="about.html"><strong></strong>About</a>
<ul>
<li><a href="#">history</a></li>
<li><a href="contacts.html">contatti</a>
</ul>
</li>
<li><strong></strong><a href="products.html"><strong></strong>Products</a></li>
<li><strong></strong><a href="index2.html"><strong></strong>Services</a></li>
<li><strong></strong><a href="#.html"><strong></strong>Store</a></li>
</ul>
<div class="clear"></div>
</nav>
Can you help me fix this issue please?
