响应式设计 - MVC菜单

Question

我尝试在我的网站中使用下拉菜单。但是下拉不起作用。当我打开菜单时，产品菜单会同时打开。 ＆＃34;产品＆＃34;应该在用户点击它时打开。

此外，我的css代码对产品1和2不起作用，因为我尝试将它们对齐，在picture中显示。

有人可以帮我解决这两个问题吗？

＆＃13;

＆＃13;

$(document).ready(function() {
  $('.menu').click(function() {
    $('.menu-items').toggle(700);
  });
  $('.product').click(function() {
    $('.category-items').toggle(700);
  });
});

＆＃13;

/* nav-mobile */

#nav-mobile {
  width: 100%;
  position: relative;
  background: #222;
  display: inherit;
}
.nav-mobile {
  width: 100%;
  position: relative;
  margin: auto;
}
.nav-mobile-button {
  width: 100%;
  height: 60px;
  line-height: 60px;
  text-align: center;
  position: relative;
  margin: auto;
  cursor: pointer;
  font-weight: bold;
  border-bottom: 1px dotted #777;
  transition: all .2s ease-in-out;
}
.nav-mobile-button:hover {
  background: #111;
}
.nav-mobile-button-category {
  width: 100%;
  height: 60px;
  line-height: 60px;
  text-align: center;
  position: relative;
  background: #555;
  margin: auto;
  cursor: pointer;
  font-weight: bold;
  border-bottom: 1px dotted #777;
  transition: all .2s ease-in-out;
}
.category-items {
  display: none;
}
.nav-mobile-button-last {
  border-bottom: none;
}
.menu-items {
  display: none;
}
.nav-mobile-menu-logo {
  margin-top: 10px;
  margin-left: -15px;
  display: inline-block;
}
.nav-mobile-menu-text {
  position: relative;
  display: inline-block;
  top: -15px;
}
.nav-mobile-menu-category {
  position: relative;
  display: inline-block;
  top: -15px;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="nav-mobile">
  <div class="nav-mobile">
    <div class="nav-mobile-button menu">
      <div class="nav-mobile-menu-text">Menu</div>
    </div>
    <div class="menu-items">
      <div class="nav-mobile-button">Home</div>
      <div class="nav-mobile-button product">
        <div class="nav-mobile-menu-category">Product</div>
      </div>
      <div class="category-items">
        <div class="nav-mobile-button-category">Product1</div>
        <div class="nav-mobile-button-category">Product2</div>
      </div>
      <div class="nav-mobile-button">AboutUs</div>
      <div class="nav-mobile-button nav-mobile-button-last">Contact</div>
    </div>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;