首页 文章

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

提问于
浏览 次
0

我正在重新启动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>
html css

2 回答

  • 0

    只需在你的主ul上添加一个类（例如我添加了'main-menu'）然后添加这个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;
}
    回复于
  • 0

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

    HTML CODE

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

    <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>
    回复于

相关问题