首页 文章

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

提问于
浏览 次
0

我目前正在重新启动我的博客 - 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

html css blogger

2 回答

  • 0

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

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

    回复于
  • 0

    如果您采用简单的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. 菜单中的"Social"文本（标签）是默认 italic . 要更改它的样式，请在.css中使用 optgroup[label="Social"]{ } 并将所需的样式放在大括号内 .

    回复于

相关问题