css - 使用 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 -->