如何在现有的下拉菜单中编写额外的下拉菜单选项？

Question

我目前正在重新启动我的博客 - www.blankesque.com - 它托管在 Blogger 上，理想情况下希望更改博客的导航。我开始明白 Blogger 在编码方面的多功能性是有限的。但我希望能就我在除此之外多次遇到的问题获得一些帮助。

我已经有一个带有三个选项卡的悬停导航栏，其中两个选项卡具有下拉选项。位于屏幕左角的“Blankesque”就是这样一个标签。我想在此下拉菜单中添加另一个下拉菜单选项。

我上面提到的特定标签的当前编码如下：

<ul>
<li><a href='#'>Blankesque</a>
<ul>
<li><a href='http://www.blankesque.com'>Home</a></li>
<li><a href='http://www.blankesque.com/p/about-blankesque-blog.html'>About</a>      </li>
<li><a href='http://www.blankesque.com/p/disclaimer-policy_13.html'>Policies</a></li>
<li><a href='#'>Social</a>
<ul>
<li><a href='http://www.twitter.com/blankesque'>Twitter</a></li>
<li><a href='http://www.instagram.com/blankesque'>Instagram</li></a>
<li><a href='http://www.pinterest.com/blankesque'>Pinterest</li></a>

我已尝试对我正在寻找的外观进行编码，但是从上面的编码中您可以看到“社交”选项卡的其他下拉菜单选项与其他选项一样连续出现。理想情况下，我希望 Twitter、Pinterest、Instagram 和 Bloglovin 链接仅在鼠标悬停或单击“社交”一词时出现。

在最简单的形式中，我希望在现有的下拉菜单选项中有一个下拉菜单选项。

对于这个问题的任何帮助将不胜感激。提前谢谢你。

伊拉姆

Answer 1

您可以在Bootstrap demo page 上了解更多信息。在这个网站上有下拉菜单的例子。复制提供的示例，进入开发者工具 (F12) 并检查您要更改的元素（您可以右键单击它并点击 Inspect element）。将所选 li 的内容替换为您复制的代码。

如果您不介意使用 BOOTSTRAP，这应该可以帮助您找到问题的解决方案。

Answer 2

如果您采用简单的 HTML-CSS 方法，这是您的绝对解决方案：

<!--  ****dropdown container****  -->
    <div>
        <select id="myDropDown">
                <option><a href='#'>Blankesque</a></option>
                <option><a href='http://www.blankesque.com'>Home</a></option>
                <option><a href='http://www.blankesque.com/p/about-blankesque-blog.html'>About</a></option>
                <option><a href='http://www.blankesque.com/p/disclaimer-policy_13.html'>Policies</a></option>
        <!--  ***second level dropdown***  -->
                <optgroup id="social_links" label="Social">
<option class="links"><a href='http://www.twitter.com/blankesque'>Twitter</a>
</option>
<option class="links"><a href='http://www.instagram.com/blankesque'>Instagram</a>
</option>
<option class="links"><a
href='http://www.pinterest.com/blankesque'>Pinterest</a>
</option>
                </optgroup>
                </select>
    </div>

现在，这很简单直接。如果你想要一些视觉上的智能，那么将它添加到 .css 中：

#social_links>.links
{display: none;}
#social_links:hover>.links
{display: block;}

P.S.菜单内的“社交”文本（标签）默认为italic。要更改它的样式，请在 .css 中使用 optgroup[label="Social"]{ } 并将您想要的样式放在大括号内。