html - 如何在下拉菜单选项中编写下拉菜单？

Question

我正在重新启动 my blog并且理想情况下希望更改博客的导航。

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

这是在“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 代码

<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>

CSS 代码

<style>
    #primary_nav_wrap {
        margin-top: 15px;
    }
    #primary_nav_wrap ul {
        background: #fcfcfc none repeat scroll 0 0;
        border: 1px solid #e7e7e7;
        float: right;
        list-style: outside none none;
        margin: 0;
        padding: 0;
        position: relative;
    }
    #primary_nav_wrap ul a {
        color: #333;
        display: block;
        font-family: "HelveticaNeue","Helvetica Neue",Helvetica,Arial,sans-serif;
        font-size: 12px;
        font-weight: 700;
        line-height: 32px;
        padding: 0 15px;
        text-decoration: none;
    }
    #primary_nav_wrap ul li {
        float: left;
        margin: 0;
        padding: 0;
        position: relative;
    }
    #primary_nav_wrap ul li.current-menu-item {
        background: #ddd none repeat scroll 0 0;
    }
    #primary_nav_wrap ul li:hover {
        background: #f6f6f6 none repeat scroll 0 0;
    }
    #primary_nav_wrap ul ul {
        background: #fcfcfc none repeat scroll 0 0;
        display: none;
        left: -178px;
        padding: 0;
        position: absolute;
        text-align: left;
        top: 100%;
    }
    #primary_nav_wrap ul ul li {
        border-bottom: 1px solid #f3f3f3;
        float: none;
        font-weight: normal;
        width: 340px;
    }
    #primary_nav_wrap ul ul a {
        color: #666;
        font-weight: normal;
        line-height: 120%;
        padding: 10px 15px;
    }
    #primary_nav_wrap ul ul ul {
        left: 100%;
        top: 0;
    }
    #primary_nav_wrap ul li:hover > ul {
        display: block;
    }
</style>