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链接仅在鼠标悬停或鼠标点击“社交”一词时出现。

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

对此问题的任何帮助将不胜感激。提前谢谢。

IRAM

Answer 1

您可以在Bootstrap demo page上了解详情。在这个网站上有下拉菜单的例子。复制提供的示例，输入开发人员工具（F12）并检查要更改的元素（您可以右键单击它并按检查元素）。将所选 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"]{ }并将所需的样式放在大括号内。

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

2 个答案: