Question

我正在重新启动my blog，理想情况下会更改博客的导航。

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

这是当前编码，显示'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>
        </ul>
    </li>

这是当您单击或鼠标悬停在选项卡名称'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>
                </ul>
            </li>
        </ul>
    </li>

Answer 1

这对我有用，希望它能解决你的问题。

HTML CODE

build.gradle

CSS代码

<div style="float:right; margin-top:-4px; margin-right:350px" id="primary_nav_wrap">
<ul style=" border:1px solid #FEB405">
  <li style="background:#ffce00;"><a href="#">Select Dropdown<img width="9" height="5" align="absmiddle" alt="" style="margin-left:10px;" src="images/arrow_down.png"></a>
    <ul>
      <li><a href="#1">Option 1</a></li>
      <li><a href="#1">Option 2</a></li>
      <li><a href="#1">Option 3</a></li>
      <li><a href="#1">Option 4</a></li>    
    </ul>
  </li>
</ul>
</div>

Answer 2

只需在您的主要ul上添加一个课程（我添加了主菜单＆＃39;例如）然后添加此css：

.main-menu > li > ul,
.main-menu > li > ul > li > ul,
.main-menu > li > ul > li > ul > li > ul {
    display: none;
}

.main-menu > li:hover > ul,
.main-menu > li > ul > li:hover > ul,
.main-menu > li > ul > li > ul > li:hover > ul {
    display:block;
}

如何在下拉菜单选项中编码下拉菜单？

2 个答案: