<ul class="menu">
  <li>選單1</li>
  <li>選單2</li>
  <li>選單3</li>
  <li>選單4</li>
  <li>選單5</li>
  <li>選單6</li>
 </ul>

body {
  box-sizing: border-box;
}

.menu {
  width: 500px;
  margin: 0 auto;
  margin-top: 10px;
  li {
    border: 1px solid gray;
    padding: 5px;
    margin-bottom: 10px;
    &:hover {
      background-color: yellow;
      cursor: pointer;
    }
    &.active {
      background-color: yellow;
      cursor: pointer;
    }
  }
}

$(function () {
  $(".menu li").click(function (e) {
    e.preventDefault();
    $(this).addClass("active").siblings().removeClass("active");
  });
});