如何使用相同的.dropit css文件创建具有不同属性的两个下拉菜单?

HTML:我使用'menu'和'settings1'类作为我的两个下拉菜单。

下拉列表元素1:菜单

      <ul class="menu">
        <li>
          <a href="#" class="btn">+ Add</a>
          <ul>
              <li><a href="#"><i class="fa fa-file-o"></i> Note</a></li>
              <li><a href="#"><i class="fa fa-picture-o"></i> Image</a></li>
              <li><a href="#"><i class="fa fa-link"></i> Link</a></li>
          </ul>
        </li>
      </ul>

下拉列表元素2: Settings1

<ul class="settings1">
        <li>
          <a href="#"><i class="fa fa-cog"></i></a>
          <ul>
              <li><a href="#"><i class="fa fa-cog"></i> Account Settings</a></li>
              <li><a href="#"><i class="fa fa-sign-out"></i> Sign Out</a></li>
          </ul>
        </li>
      </ul>

JS调用每一个:我引用这两个类(菜单和settings1)到我的dropit.css文件。

<script type="text/javascript">
 $(".menu").dropit();
 $( "#menu" ).click(function() {
     $("#left-nav").toggleClass("open", 200);
 });
</script>
<script type="text/javascript">
 $(".settings1").dropit();
 $( "#settings1" ).click(function() {
     $("#left-nav").toggleClass("open", 200);
 });
</script>

在我的。dropit CSS文件中，我已经开始了下拉菜单的形成，但我如何独特地调用setings1或菜单类，以便我可以为每个具有不同的属性?

.dropit {
list-style: none;
padding: 0;
margin: 15px 0 0;
float: right;
display: inline;
}
.dropit .dropit-trigger { position: relative; }
.dropit .dropit-submenu {
position: absolute;
top: 100%;
z-index: 1000;
display: none;
min-width: 100px;
list-style: none;
padding: 20px;
margin: 20px 0 0;
}