如何将其中一个链接转换为下拉菜单？

我目前正在制作一个使用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>

来源

2016-08-11 swornxin

有一个非常有用的网站，取得了一个插件只有在这种情况 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

来源

2016-08-11 14:30:49 itzJustKranker

如何将其中一个链接转换为下拉菜单？

回答

相关问题