CODEWITHSUNDEEP
jqueryhtmlsubmenu
Problem Child
Problem Child

Reputation: 585

Sub-Menu not staying open when mouse hovers over Menu item

I have a web page where there are navigation links. On hovering of certain navigation links, I want a separate menu to open up. I have managed to complete that. My problem is, when I hover over the particular navigation link, the sub-menu shows but when I try to click on a ink in the sub-menu, it disappears.

Here's my code .ascx :

<div class="navigation">
    <h4 id="home"><a href="../Home.aspx">Home</a></h4>
    <h4 id="gallery"><a href="#">Gallery</a></h4>
        <div class="galList">
            <h4 id="newGal"><a href="#">New</a></h4>
                <div class="galNewList">
                    <h4><a href="#">Profile pictures</a></h4>
                    <h4><a href="#">Backgrounds</a></h4>
                </div>
            <h4 id="refundTick"><a href="#">Delete</a></h4>
        </div>
    <h4 id="about"><a href="#">About</a></h4>
</div>

.js

$(document).ready(function () {
    $('.galList').hide();
    $('.galNewList').hide();

    $('#gallery').click(function () {
        if ($('.galList').is(':hidden')) {
            $('.galList').slideDown(500);
        }

        else {
            $('.galList').slideUp(500);
        }
    });

    $('#newGal').hover(function () {
        if ($('.galNewList').is(':hidden')) {
            $('.galNewList').show();
        }

        else {
            $('.galNewList').hide();
        }
    });
});

Upvotes: 0

Views: 370

Answers (1)

Pete
Pete

Reputation: 58412

I would change your html to be the following and it should make your js work as well as being more semantically correct:

$(document).ready(function() {
  $('.galList').hide();
  $('.galNewList').hide();

  $('#gallery').click(function() {
    if ($('.galList').is(':hidden')) {
      $('.galList').slideDown(500);
    } else {
      $('.galList').slideUp(500);
    }
  });

  $('#newGal').hover(function() {
    if ($('.galNewList').is(':hidden')) {
      $('.galNewList').show();
    } else {
      $('.galNewList').hide();
    }
  });
});
.navigation,
.navigation ul {
  list-style: none;
  padding: 0;
  margin: 0;
}
.navigation > li {
  display: inline-block;
  position: relative;
  margin-right: 10px;
}
.navigation > li > ul {
  position: absolute;
  left: 0;
  top: 100%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<ul class="navigation">
  <li id="home"><a href="../Home.aspx">Home</a></li>
  <li id="gallery">
    <a href="#">Gallery</a>
    <ul class="galList">
      <li id="newGal">
        <a href="#">New</a>
        <ul class="galNewList">
          <li><a href="#">Profile pictures</a></li>
          <li><a href="#">Backgrounds</a></li>
        </ul>
      </li>
      <li id="refundTick"><a href="#">Delete</a></li>
    </ul>
  </li>
  <li id="about"><a href="#">About</a></li>
</ul>

The problem with your current html is that when you hover the "child items", they are not actually children of the hovered element so you are no longer hovering and the children will hide themselves again.

If you are desperate to keep your html structure, then you will need to change the selector for your hover:

$('#newGal,.galNewList').hover(function ....

And remove any margin between newGal and galList - if you need spacing, change it for padding:

h4 { margin:0; padding:5px 0; }

Example

Upvotes: 1

Related Questions