文章/答案/技术大牛

发布

css多级导航菜单

CSS多级导航菜单基础概念

CSS多级导航菜单是一种网页设计元素，用于展示层次结构的菜单项。这种菜单通常包括主菜单项和子菜单项，子菜单项可以是主菜单项的下拉列表或侧边栏。CSS多级导航菜单通过CSS样式和HTML结构来实现，不需要JavaScript。

类型

下拉菜单：当用户将鼠标悬停在主菜单项上时，子菜单项会从主菜单项下方弹出。
侧边栏菜单：子菜单项显示在主菜单项的旁边，通常用于展示更深层次的菜单项。
垂直菜单：菜单项垂直排列，适用于空间有限的页面布局。

应用场景

多级导航菜单广泛应用于各种类型的网站，特别是那些内容丰富、结构复杂的网站，如电子商务网站、新闻网站、企业网站等。

示例代码

以下是一个简单的CSS多级导航菜单的示例代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS多级导航菜单</title>
    <style>
        ul {
            list-style-type: none;
            padding: 0;
            margin: 0;
        }
        li {
            display: inline-block;
            position: relative;
        }
        a {
            display: block;
            padding: 10px 20px;
            text-decoration: none;
            color: #333;
        }
        ul ul {
            display: none;
            position: absolute;
            top: 100%;
            left: 0;
            background-color: #fff;
            border: 1px solid #ccc;
        }
        li:hover > ul {
            display: block;
        }
        ul ul li {
            display: block;
            width: 200px;
        }
    </style>
</head>
<body>
    <nav>
        <ul>
            <li><a href="#">主菜单1</a>
                <ul>
                    <li><a href="#">子菜单1.1</a></li>
                    <li><a href="#">子菜单1.2</a>
                        <ul>
                            <li><a href="#">子菜单1.2.1</a></li>
                            <li><a href="#">子菜单1.2.2</a></li>
                        </ul>
                    </li>
                </ul>
            </li>
            <li><a href="#">主菜单2</a></li>
            <li><a href="#">主菜单3</a></li>
        </ul>
    </nav>
</body>
</html>

参考链接

CSS多级导航菜单教程

常见问题及解决方法

子菜单不显示：
- 原因：可能是CSS选择器或样式设置不正确。
- 解决方法：检查CSS选择器是否正确，确保子菜单的display属性设置为none，并在父菜单项悬停时设置为block。

子菜单位置不正确：
- 原因：可能是position属性设置不正确。
- 解决方法：确保子菜单的position属性设置为absolute，并正确设置top和left属性。
响应式设计问题：
- 原因：可能是媒体查询设置不正确。
- 解决方法：使用媒体查询来调整不同屏幕尺寸下的菜单样式，确保在移动设备上也能正常显示。

通过以上方法，可以解决大多数CSS多级导航菜单的常见问题。

页面内容是否对你有帮助？

有帮助

没帮助

如何将子菜单添加到此响应菜单中？

jquery、html、css、responsive-design、navigation

我有这个响应的navigation.But，我不能添加多级子菜单到这个导航。如何将多级子菜单添加到此中

浏览 4提问于2015-06-24得票数 0

回答已采纳

1回答

多级菜单但都在同一个下拉菜单下？

navigation

如何在Drupal中创建一个菜单，其中您有多个级别，但是它们都显示在相同的下拉列表中，但其子菜单项缩进。

浏览 0提问于2016-04-05得票数 0

2回答

Breadcrumb无法正常工作的角度和材质多级菜单

angular、angular-material、angular6、breadcrumbs、angular-material-6

在这里我尝试创建带有面包屑的多级菜单。我已经正确地处理了多级菜单，但无法使用选定的面包屑导航菜单。当我单击所选的面包屑时，菜单没有得到适当的组织。我的演示链接：

浏览 1提问于2018-07-02得票数 0

回答已采纳

1回答

用于导航的移动和平板设备，带有css/jquery子菜单

jquery、css、mobile、hover、tablet

在导航菜单上，悬停时会显示一些子菜单<nav> <a href="shop.html">Shop</a> </ul> <&#x

浏览 0提问于2013-08-08得票数 2

1回答

如何从正面创建侧面导航中的Hugo多级菜单

hugo

我是新手雨果，我正在努力建立一个简单的网站，所以我试图建立左侧的多级菜单，这将作为一个侧面导航在网站上工作。我不知道如何才能从前面的内容创建多级菜单。

浏览 26提问于2019-11-28得票数 0

6回答

没有JS依赖的基于CSS的响应式多级下拉菜单的解决方案？

css、navigation

我一直在查看可用的响应式下拉菜单/导航栏，但似乎什么都不能正常工作。我主要需要一个基于CSS的菜单，不依赖于JavaScript黑客。那么，你遇到过哪些可能对你有用的导航系统呢？

浏览 2提问于2012-09-26得票数 9

1回答

多级水平菜单CSS

javascript、jquery、html、css

我需要创建一个水平菜单，它跨越3个级别的深度(顶部导航，次导航，SubSub导航)。 $this.parent().addClass('active');}); 顶部导航和辅助

浏览 20提问于2017-01-18得票数 0

4回答

CSS下拉菜单和SEO

css、seo

对于SEO来说，多级CSS下拉菜单是一个很大的“禁忌”。有什么想法吗？谢谢

浏览 0提问于2010-03-09得票数 1

回答已采纳

1回答

自举水平多级菜单

javascript、html、css、twitter-bootstrap-3

是否有任何方法来创建一个水平的多级菜单结构使用引导，我还没有看到任何水平方向的多级菜单。如果没有，我必须使用一些外部css和样式来生成这种菜单。菜单结构的示例结构类似于

浏览 2提问于2014-10-16得票数 7

2回答

MaterializeCSS和多级jQuery菜单上的DIV重叠问题

html、css、css-float、materialize

我正在开发一个使用MaterializeCSS作为HTML5 5/CSS3 3框架的小型web应用程序。我想在我的应用程序上添加一个负责的多级菜单。这是响应多级菜单：基本上，我采用了物化入门模板，删除了一些div，并添加了多级菜单代码。它看起来很可怕，重叠，不合适。我有几个小时的时间来解决这个问题，但我不明白，有些CSS忍者能给我一些建议吗？

浏览 1提问于2017-01-11得票数 1

回答已采纳

1回答

用于多级导航菜单的Wordpress插件

navigation、wordpress

在drupal中，我们有来创建多级导航菜单。 wordpress 3有这样的插件吗？

浏览 0提问于2010-07-12得票数 0

回答已采纳

1回答

MaterialUI TypeScript:可以在"NavItem“中添加多级导航菜单吗？

reactjs、typescript、material-ui、next.js、react-material-ui-form-validator

如何使用MaterialUI和TypeScript创建多级导航菜单？我想在“/问句”中添加如下:2导航菜单：就像在截图里一样export function NavBar(...) { return

浏览 4提问于2022-02-15得票数 -2

回答已采纳

1回答

多级下拉，侧边菜单在ng-cloak中不起作用

jquery、html、css、angularjs、twitter-bootstrap

我正在基于这个引导模板创建web应用程序： <...list of source file>在ui-view导航栏中，我有我的导航栏，顶部和左侧菜单。当在此导航栏中添加多级下拉菜单时，下

浏览 0提问于2015-05-10得票数 0

1回答

Umbraco宏-显示所有节点的内容

xslt、macros、umbraco

我有一个导航栏，其中所有的链接都是从Umbraco项目(由用户输入)。此导航栏需要显示在所有页面上。我尝试将这些项插入到主模板中，但链接不会向下传递到从节点。

浏览 1提问于2013-01-18得票数 1

9回答

我正在尝试实现一个水平的多级下拉导航菜单。在菜单下面(垂直)，我有一个通过iframe嵌入的YouTube视频。如果我悬停在Firefox中的主要导航项上，下拉菜单就会正确地出现在视频的顶部。然而，在Chrome和IE9中，在菜单和iframe之间的小空间中，只有一小块下拉菜单是可见的。其馀的似乎是背后的iframe。问题似乎与YouTube视频有关，而不是iframe。为了测试，我把iframe瞄准了另一个网站，而不是视频，下拉菜单</em

浏览 11提问于2012-01-30得票数 133

回答已采纳

3回答

多级菜单与css和html？

html、css

我希望创建一个纯css和html的多级菜单。菜单的位置应该是由css.Can控制的，有人能帮我吗？

浏览 5提问于2011-02-18得票数 0

1回答

jquery多级菜单

jquery、css、menu

大家好，我已经创建了一个基于jquery的多级导航菜单，当onMouse每个子导航出现在悬停/单击列表项的正下方时。我现在遇到的问题是，选定的父项的bg颜色没有像subnav bg一样改变。ready(function() { $(this).css({ 'background' :

浏览 2提问于2011-03-29得票数 0

回答已采纳

4回答

带有引导程序3的多级子菜单

8、theming、navigation

我试图在Drupal 8上使用一个引导主题来制作一个多级菜单，我已经为所有的子菜单容器创建了菜单并激活了"Show子程序“标志，但是只有第一级子菜单显示。http://knackforge.com/blog/pathirakaliappan/create-multi-level-bootstrap-menu-in-Drupal-8，但它似乎不起作用:子菜单根本没有在

浏览 0提问于2016-06-04得票数 1

回答已采纳

1回答

多级下拉bootstrap 3 navwalker

php、css、wordpress、drop-down-menu

我想在Bootsrap 3和Wordpress中创建一个多级下拉菜单，我需要一些帮助。我甚至不知道这是否可能，因为如果我读了navwalker的手册，它说下拉菜单只支持一个孩子，因为移动优先的方法。尽管如此，我认为我应该可以通过检查这个网站：不幸的是，当我编辑第118行时，在我的例子中，下拉菜单不起作用，顶部的导航项目上的插入符号也不见了。

浏览 2提问于2013-10-21得票数 0

4回答

触摸友好的嵌套导航菜单的解决方案？

html、css、responsive-design、navigation

在创建响应式网站时，我遇到的一个常见问题是如何制作一个适用于触摸设备的多级导航菜单(3级或更多)。我见过很多插件和技术，但它们中的大多数都失败了，因为它们不允许二级页面既充当指向页面的链接，又充当子菜单中的子菜单中的子项的父项。一些技术通过在单击父页面名称转到实际页面时显示子菜单项的箭头图标来解决此问题。但在移动设备上，这些图标通常是非常小的目标，因此很难使用。这个问题有没有其他的解决方案( jquery或javascript插件，或者直接的CSS/JS代码)

浏览 1提问于2014-05-30得票数 0

点击加载更多

css多级导航菜单