I'm having issues with the jkmegamenu on my site. Surprisingly the culprits are Safari and Chrome this time! First of all I needed to target the positioning specifically to Safari and Chrome as it would ignore the padding on the a. Secondly, unless I immediately move my cursor on to the menu div it will disappear. Thirdly it only seems to invoke the a:hover css AFTER the js loses its hover (whereas other browsers will display them simultaneously). Any ideas of what is going on here?

HTML:

        <!-- Main Navigation and Search -->
    <div id="main-nav" class="clearfix">
      <!-- Main Navigation -->
      <ul>
        <li>
          <a href="/" title="Home">Home</a>
        </li>
        <li>
          <a href="travelinformation/" id="megaanchor">Travel information</a>
          <div id="megamenu1" class="megamenu">

<div class="column">    <h3>Journey planner</h3>    <ul>    <li><a href="#">Journey planner</a></li>    <li><a href="#">Train journey planner</a></li>  </ul>
        <h3>Services and timetables</h3>    <ul>    <li><a href="#">Services and timetable search</a></li>  <li><a href="#">Buses</a></li>
    <li><a href="#">Trains</a></li>
    <li><a href="#">Ferries</a></li>    </ul>
            <h3>Service updates</h3>    <ul>    <li><a href="#">Service updates</a></li>    </ul>
     </div>

<div class="column">    <h3>Stops and stations</h3>     <ul>    <li><a href="#">Stops near you</a></li>     </ul>
        <h3>Maps</h3>   <ul>    <li><a href="#">List of all stops</a></li>  </ul>
            <h3>Other links</h3>    <ul>    <li><a href="#">Accessibility services</a></li>
    <li><a href="#">Safety and security</a></li>
       <li><a href="#">Howto guides</a></li>    </ul> </div> </div>
            </li>
            <li>
              <a href="tickets/">Tickets and fares</a>
            </li>
            <li>
              <a href="news/">News and updates</a>
            </li>
            <li>
              <a href="about-us.html">About</a>
            </li>
          </ul>
        </div>
        <!-- End Main Navigation and Search -->

CSS:

   #main-nav {
-moz-box-shadow:0 2px 20px rgba(0,0,0,0.2);
-webkit-box-shadow:0 2px 20px rgba(0,0,0,0.2);
background-image:url(../images/repeater_mainnav.png);
border-bottom:1px #b2b2b2 solid;
border-top:1px #f6f6f6 solid;
clear:both;
}

#main-nav ul {
height:39px;
}

#main-nav ul li {
color:#fff;
float:left;
list-style-type:none;
text-decoration:none;
padding-top:12px;
padding-bottom:12px;
border-left:1px #f6f6f6 solid;
border-right:1px #b2b2b2 solid;
}

#main-nav ul li a {
color:#4d4948;
font-size:13px;
padding-left:1em;
padding-right:1em;
padding-top:11px;
padding-bottom:12px;
text-decoration:none;
text-transform:uppercase;
}

#main-nav ul li a:hover {
background: url(../images/nav_hover_alt.png) bottom center;
}

#main-nav ul li a:active,.thispage {
background-image: url(../images/repeater_mainnav_active.png);
top:0!important;
}

#main-nav ul li a:hover {
background-image: linear-gradient(top, rgba(0,0,0,0.2),rgba(0,0,0,0.1));
background-image: -moz-linear-gradient(top, rgba(0,0,0,0.9),rgba(0,0,0,0.1));
background-image: -webkit-gradient(linear, top center, top center, from(rgba(0,0,0,0.9)), to(rgba(0,0,0,0.1)));
filter: progid:DXImageTransform.Microsoft.Gradient(GradientType=1, StartColorStr='#FF000000', EndColorStr='#22000000');
-ms-filter: progid:DXImageTransform.Microsoft.Gradient(GradientType=1, StartColorStr='#FF000000', EndColorStr='#11000000');
}

/* megamenu
-------------------------------------- */

.megamenu{
position: absolute;
display: none;
left: -2px;
top: 0;
margin-top: 2px;
margin-left: -1px;
padding: 10px;
z-index: 100;
border-left:1px #f6f6f6 solid;
border-right:1px #b2b2b2 solid;
border-bottom:1px #b2b2b2 solid;
-moz-box-shadow:0 2px 20px rgba(0,0,0,0.2);
-webkit-box-shadow:0 2px 20px rgba(0,0,0,0.2);
-moz-border-radius-bottom-left:0.5em;
-moz-border-radius-bottom-righ:0.5em;
-webkit-border-bottom-left-radius:0.5em;
-webkit-border-bottom-right-radius:0.5em;
}

.megamenu .column{
float: left;
width: 200px; /*width of each menu column*/
margin-right: .5em;
}

.megamenu .column ul{
margin: 0;
padding-bottom: 1em;
list-style-type: none;
}

.megamenu .column ul li{
padding-bottom: 5px;
}

.megamenu .column h3{
margin: 0 0 7px 0;
font-weight:bold;
}

.megamenu .column ul li a{
text-decoration: none;
padding-left: 20px;
background:url(../images/bullet_arrowclear.png) 8px 4px no-repeat;
}

.megamenu .column ul li a:hover{
text-decoration: underline;
}
  /* Safari and chrome megamenu hack */
@media screen and (-webkit-min-device-pixel-ratio:0) 
{ 


.megamenu {
margin-top: 31px!important;
}
}  

2 answers

0
points

Based on another comment I saw on this I also added:

<script type="text/javascript">
jQuery(function($){
 $('#megamenu1').hover(function(){
  $('#megaanchor').addClass('hover');
 }, function(){
  $('#megaanchor').removeClass('hover');
 })
})
</script>

to the header to no avail.

Answered over 6 years ago by Erik Veland
0
0
points

Without seeing a working version it's hard to pinpoint the problem... Even if I were to copy the code you posted above, it doesn't include the script or css which actually makes the submenu visible upon hovering #megaanchor and as such, I can't test to replicate the issue.

Can you post an example page?

Answered over 6 years ago by