使用dropit.js的下拉菜單

Question

我使用dropit.js創建了一個下拉菜單，工作得很好。我試圖複製它爲我的帳戶設置菜單，它似乎沒有與CSS繼承。

這是我的HTML：

<ul id="top-nav" class="settings menu"> 
    <li><img src="twitter/idiot/128.jpg" alt="avatar"></li> 

    <li><a href="https://s3.amazonaws.com/uifaces/faces/twitter/idiot/128.jpg">Sam Yanow I</a></li> 
     <ul> 
       <li><a href="#"><i class="fa fa-gear"></i> Account Settings</a></li> 
       <li><a href="#"><i class="fa fa-group"></i> Collaborators</a></li> 
       <li><a href="#"><i class="fa fa-plus-circle"></i>Upgrade</a></li> 

      </ul> 

    <li class="btn-outline"><a href="signup.html">Sign Up</a></li> 
    </ul> 

這是在底部相關的JS：

<script type="text/javascript"> $(".menu").dropit();

A link to dropit.css。

A link to the dropit.js。

Answer 1

您關閉了LI，然後在UL中添加了應該是LI的孩子作爲LI的兄弟。

孩子UL應該在LI裏面。

Demo

<li><a href="https://s3.amazonaws.com/uifaces/faces/twitter/idiot/128.jpg"> 
     Sam Yanow I 
    </a><!-- remove this </li> --> 
    <ul> 
      <li><a href="#"><i class="fa fa-gear"></i> Account Settings</a></li> 
      <li><a href="#"><i class="fa fa-group"></i> Collaborators</a></li> 
      <li><a href="#"><i class="fa fa-plus-circle"></i>Upgrade</a></li> 

    </ul> 
</li><!-- it belongs here -->