如何编写下拉菜单中的下拉菜单选项？

问题描述

我要重新启动，并希望能够更改博客的导航。

I'm re-launching my blog and would ideally like to make changes to the navigations of the blog.

我已经有一个有三个标签的悬停导航栏，其中两个标签有下拉选项。 Blankesque选项卡 - 位于屏幕的左上角 - 是这样的选项卡。

I already have a hovering navigation bar with three tabs and two of these tabs have dropdown options. The 'Blankesque' tab - situated in the left corner of the screen - is such a tab. I would like to add another dropdown menu within this dropdown menu.

这是当前编码，显示Blankesque标签中的下拉菜单选项：

This is the current coding which displays the dropdown options in the 'Blankesque' tab:

<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 '。然而，我想有另一个下拉菜单选项标题为社会，然后将有自己的下拉菜单与我的相关社交媒体帐户链接。我尝试了以下编码，尽管它不能很好地工作，即使我使用类似的原则。

This is the basic dropdown menu that appears when you click or the mouse hovers over the tab name 'Blankesque'. I however would like there to be another dropdown menu option titled 'Social' which would then have its own dropdown menu with my relevant social media account links. I have tried the following coding nonetheless it doesn't work well even though I use similar principles.

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

推荐答案

'main-menu'），然后添加这个css：

just add a class at your main ul (i added 'main-menu' for example) and then add this 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;
}

这篇关于如何编写下拉菜单中的下拉菜单选项？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！