如何编写下拉菜单中的下拉菜单选项? [英] How To Code A Dropdown Menu Within A Dropdown Menu Option?

查看:99
本文介绍了如何编写下拉菜单中的下拉菜单选项?的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

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

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

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

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆