如何使用相同的.dropit css文件創建具有不同屬性的兩個下拉菜單？

Question

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：設置1

<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調用每個：我參考兩個類（菜單和設置1）成我的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文件，我已經開始下拉的形成，但我怎麼叫鮮明無論是設置1或菜單類，所以我可以爲每個不同的屬性？

.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; 
} 

Answer 1

如果我理解正確的問題然後就直接應用CSS來.menu和.settings1。