html - 如何将这些链接之一变成下拉菜单？

Question

我目前正在使用 Tumblr 主题制作网站。我想要我的链接之一(商品)打开不同选项的下拉菜单。有没有办法在不将整个导航切换到 li 元素的情况下做到这一点？之后我可以设计它，我只是不知道如何在不破坏整个主题的情况下做到这一点。 提前致谢。

#pages {
  float: right;
}
#pages a {
  float: right;
  color: black;
  margin: 22px;
  padding: 5px;
  text-transform: uppercase;
  text-decoration: none;
  font-family: sans-serif;
  font-size: 10px;
}
#pages a:hover {
  color: #d95e40;
}

<div id="pages" class="desktop">
  <a href="/contact" title="Contact"><h2 class="page">Contact</h2></a>
  <a href="http://ryanblack.net" target="_blank"><h2 class="page">Merchandise</h2></a>
  <a href="/videos" title="Videos"><h2 class="page">Videos</h2></a>
  <a href="/lyrics" title="Lyrics"><h2 class="page">Lyrics</h2></a>
  <a href="/releases" title="Releases"><h2 class="page">Releases</h2></a>
  <a href="/shows" title="Shows"><h2 class="page">Shows</h2></a>
</div>

Answer 1

有一个有用的网站专门针对这种情况制作了一个插件 http://labs.abeautifulsite.net/jquery-dropdown/

在那里您会看到将下拉列表添加到 <a> 的选项。标签。

<a href="#" data-jq-dropdown="#jq-dropdown-1">Merchandise</a>

您的实际下拉列表将驻留在 jq-dropdown-1 div 中。或者你想给它起什么名字。

<div id="jq-dropdown-1" class="jq-dropdown jq-dropdown-tip">
<ul class="jq-dropdown-menu">
    <li><a href="#1">Item 1</a></li>
    <li><a href="#2">Item 2</a></li>
    <li><a href="#3">Item 3</a></li>
    <li class="jq-dropdown-divider"></li>
    <li><a href="#4">Item 4</a></li>
    <li><a href="#5">Item 5</a></li>
    <li><a href="#5">Item 6</a></li>
</ul>

插件完成剩下的工作，为您提供 <a> 的简单解决方案简单链接到所需脚本后的标记下拉列表

<link type="text/css" rel="stylesheet" href="jquery.dropdown.css" />
<script type="text/javascript" src="jquery.dropdown.js"></script>

可以在此处的 GitHub 页面上找到 >> https://github.com/claviska/jquery-dropdown