我用的是mmenu插件，具体按照例子 这里：https://mmenujs.com/demo/index.html?demo=menu-advanced-4
< <div id="menu"> <ul id="contacts"> <li> <span> <span class="preview"> <img src="img/profile-1-b.png" /> <span>Alan<br> <small>Thompson</small> </span> </span> </span> <div data-mm-title="Alan Thompson"> <div class="details"> <img src="img/profile-1-b.png" /> <strong>Alan</strong> <dl> <dt>Name</dt> <dd>Alan Thompson</dd> <dt>Phone</dt> <dd>012-345-6789</dd> <dt>Email</dt> <dd>[email protected]</dd> </dl> </div> </div> </li> <li> <span> <span class="preview"> <img src="img/profile-2-b.png" /> <span>Anne<br> <small>Cook</small> </span> </span> </span> <div data-mm-title="Anne Cook"> <div class="details"> <img src="img/profile-2-b.png" /> <strong>Anne</strong> <dl> <dt>Name</dt> <dd>Anne Cook</dd> <dt>Phone</dt> <dd>012-345-6789</dd> <dt>Email</dt> <dd>[email protected]</dd> </dl> </div> </div> </li> <li> <span> <span class="preview"> <img src="img/profile-3-b.png" /> <span>Charles<br> <small>Walker</small> </span> </span> </span> <div data-mm-title="Charles Walker"> <div class="details"> <img src="img/profile-3-b.png" /> <strong>Charles</strong> <dl> <dt>Name</dt> <dd>Charles Walker</dd> <dt>Phone</dt> <dd>012-345-6789</dd> <dt>Email</dt> <dd>[email protected]</dd> </dl> </div> </div> </li> <li> <span> <span class="preview"> <img src="img/profile-4-b.png" /> <span>Cheryl<br> <small>Rivera</small> </span> </span> </span> <div data-mm-title="Cheryl Rivera"> <div class="details"> <img src="img/profile-4-b.png" /> <strong>Cheryl</strong> <dl> <dt>Name</dt> <dd>Cheryl Rivera</dd> <dt>Phone</dt> <dd>012-345-6789</dd> <dt>Email</dt> <dd>[email protected]</dd> </dl> </div> </div> </li> <li> <span> <span class="preview"> <img src="img/profile-5-b.png" /> <span>Harry<br> <small>Stewart</small> </span> </span> </span> <div data-mm-title="Harry Stewart"> <div class="details"> <img src="img/profile-5-b.png" /> <strong>Harry</strong> <dl> <dt>Name</dt> <dd>Harry Stewart</dd> <dt>Phone</dt> <dd>012-345-6789</dd> <dt>Email</dt> <dd>[email protected]</dd> </dl> </div> </div> </li> <li> <span> <span class="preview"> <img src="img/profile-6-b.png" /> <span>Janet<br> <small>Clark</small> </span> </span> </span> <div data-mm-title="Janet Clark"> <div class="details"> <img src="img/profile-6-b.png" /> <strong>Janet</strong> <dl> <dt>Name</dt> <dd>Janet Clark</dd> <dt>Phone</dt> <dd>012-345-6789</dd> <dt>Email</dt> <dd>[email protected]</dd> </dl> </div> </div> </li> <li> <span> <span class="preview"> <img src="img/profile-1-b.png" /> <span>Jeffrey<br> <small>White</small> </span> </span> </span> <div data-mm-title="Jeffrey White"> <div class="details"> <img src="img/profile-1-b.png" /> <strong>Jeffrey</strong> <dl> <dt>Name</dt> <dd>Jeffrey White</dd> <dt>Phone</dt> <dd>012-345-6789</dd> <dt>Email</dt> <dd>[email protected]</dd> </dl> </div> </div> </li> <li> <span> <span class="preview"> <img src="img/profile-2-b.png" /> <span>Judith<br> <small>Wright</small> </span> </span> </span> <div data-mm-title="Judith Wright"> <div class="details"> <img src="img/profile-2-b.png" /> <strong>Judith</strong> <dl> <dt>Name</dt> <dd>Judith Wright</dd> <dt>Phone</dt> <dd>012-345-6789</dd> <dt>Email</dt> <dd>[email protected]</dd> </dl> </div> </div> </li> <li> <span> <span class="preview"> <img src="img/profile-3-b.png" /> <span>Roy<br> <small>Collins</small> </span> </span> </span> <div data-mm-title="Roy Collins"> <div class="details"> <img src="img/profile-3-b.png" /> <strong>Roy</strong> <dl> <dt>Name</dt> <dd>Roy Collins</dd> <dt>Phone</dt> <dd>012-345-6789</dd> <dt>Email</dt> <dd>[email protected]</dd> </dl> </div> </div> </li> <li> <span> <span class="preview"> <img src="img/profile-4-b.png" /> <span>Shirley<br> <small>Bailey</small> </span> </span> </span> <script src="http://localhost:8383/CCDir/mmenu.js"></script>