jQuery addClass example

Change class name on click in jQuery

by Sampath_Madhuranga

HTML

<div>
  <ul class="main">
    <li>
      <a href="#">abc</a>
    </li>
    <ul class="sub">
      <li><a href="#">123</a></li>
    </ul>
    
    <li><a href="#">def</a></li>
    <li><a href="#">ghi</a></li>
    <li><a href="#">jkl</a></li>
    <li><a href="#">mno</a></li>
    <li><a href="#">pqr</a></li>
  </ul>
</div>

SCSS

ul {
  list-style: none;
  padding: 0;
  margin: 0;
  &.main {
    position: relative;
  }
  li {
    display: inline-block;
    float: left;
    a {
      text-decoration: none;
      &:hover {
        text-decoration: none;
      }
    }
    & + .sub {
      display: none;
    }
    &:hover + .sub {
      display: block;
      position: absolute;
      left: auto;
      right: auto;
      top: 18px;
      background-color: #ccc;
    }
  }
}