Ad

Why Is The Sub-menu In This Accordion Menu Not Staying Open?

- 1 answer

I adapted a menu from CSS MenuMaker, and I've been hunting for why it behaves differently. It is here. When you click on the menu item, the sub-menu opens, but if the mouse remains over the clicked menu item, the rest doesn't move down to make room, and the sub-menu doesn't use the styling it is supposed to. Instead it uses the styling of a top-level menu item.

HTML

<div class="col-2 col-m-2 accordian darkYellow roundLeft">
    <p class="title">Melt-in-Place Station (MIP)
    </p>
    <ul>
        <li class="has-sub"><a><span>Reference Docs</span></a>
            <ul>
            <li><a target="_blank" rel="nofollow noreferrer" href="http://ntrs.nasa.gov/archive/nasa/casi.ntrs.nasa.gov/20150000305.pdf">
                    <span>Melted regolith construction</span></a></li>
            </ul>
        </li>
        <li class="has-sub"><a><span>Forum Threads</span></a></li>
        <li class="has-sub"><a><span>Models</span></a></li>
    </ul>
</div>

CSS

.accordian,
.accordian ul,
.accordian li,
.accordian a {
  margin: 0;
  padding: 0;
  border: 0;
  list-style: none;
  text-decoration: none;
  line-height: 1;
  font-size: 1em;
  position: relative;
  color: yellow;
}
p.title {
    font-weight: 600;
    padding: 16px 6px;
}
.accordian a {
  line-height: 1.3;
  cursor: pointer;
}
.accordian {
    font-weight: 400;
    color: rgba(255, 255, 0, 1);
    text-align: right;
}
.accordian > ul > li {
  margin: 0 0 2px 0;
}
.accordian > ul > li:last-child {
  margin: 0;
}
.accordian > ul > li > a {
  font-size: 1.1em;
  display: block;
  background: rgba(50, 50, 50, 0.6);
}
.accordian > ul > li > a > span {
  display: block;
  padding: 6px 10px;
}
.accordian > ul > li > a:hover {
  text-decoration: none;
}
.accordian > ul > li.active {
  border-bottom: none;
}
.accordian > ul > li.active > a {
    background: #333;
}
.accordian > ul > li.has-sub > a span {
  background: url(http://www.moonwards.com/img/iconPlus.png) no-repeat left center; 
}
.accordian > ul > li.has-sub.active > a span {
  background: url(http://www.moonwards.com/img/iconMinus.png) no-repeat left center; 
}
/* Sub menu */
.accordian ul ul {
  padding: 5px 12px;
  display: none;
}
.accordian ul ul li {
  padding: 3px 0;
}
.accordian ul ul a {
  display: block;
  font-size: 0.9em;
  font-weight: 400italic;
}

jQuery

( function( $ ) {
$( document ).ready(function() {
$('.accordian > ul > li > a').click(function() {
  $('.accordian li').removeClass('active');
  $(this).closest('li').addClass('active'); 
  var checkElement = $(this).next();
  if((checkElement.is('ul')) && (checkElement.is(':visible'))) {
    $(this).closest('li').removeClass('active');
    checkElement.slideUp('normal');
  }
  if((checkElement.is('ul')) && (!checkElement.is(':visible'))) {
    $('.accordian ul ul:visible').slideUp('normal');
    checkElement.slideDown('normal');
  }
  if($(this).closest('li').find('ul').children().length == 0) {
    return true;
  } else {
    return false;   
  }     
});
});
} )( jQuery );

I assume this is some dumb thing, but any help appreciated.

Ad

Answer

After inspecting I think I found the culprit. Try edit your CSS like this:

li:hover ul {
  display: block;
  position: relative; /* relative, not absolute */
  top: 100%;
  left: -10px;
  background-color: rgba(50, 50, 0, 1);
  font-size: 13px;
}
Ad
source: stackoverflow.com
Ad