纯css二级导航

基础概念

纯CSS二级导航是指使用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>
        body {
            font-family: Arial, sans-serif;
        }
        .nav {
            display: flex;
        }
        .nav > li {
            position: relative;
            list-style: none;
            padding: 10px;
        }
        .nav > li:hover > ul {
            display: block;
        }
        .nav ul {
            display: none;
            position: absolute;
            top: 100%;
            left: 0;
            background-color: #fff;
            border: 1px solid #ccc;
            padding: 0;
            margin: 0;
        }
        .nav ul li {
            list-style: none;
            padding: 10px;
        }
        .nav ul li:hover {
            background-color: #f0f0f0;
        }
    </style>
</head>
<body>
    <ul class="nav">
        <li>菜单1
            <ul>
                <li>子菜单1-1</li>
                <li>子菜单1-2</li>
            </ul>
        </li>
        <li>菜单2
            <ul>
                <li>子菜单2-1</li>
                <li>子菜单2-2</li>
            </ul>
        </li>
        <li>菜单3
            <ul>
                <li>子菜单3-1</li>
                <li>子菜单3-2</li>
            </ul>
        </li>
    </ul>
</body>
</html>

参考链接

常见问题及解决方法

子菜单不显示：
- 确保子菜单的display属性设置为none。
- 确保父菜单项的:hover伪类正确触发子菜单的显示。

子菜单位置不正确：
- 使用position: absolute和top、left属性来调整子菜单的位置。
- 确保父菜单项有position: relative属性。
兼容性问题：
- 使用浏览器前缀（如-webkit-、-moz-）来确保在不同浏览器中的兼容性。
- 参考Can I use网站来检查CSS属性的兼容性。

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

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

有帮助

没帮助

当二级UL滑下时的滴答背景

、、

我正在尝试制作一个2级的垂直导航菜单。现在发生的事情是，当二级导航所属的一级导航悬停时，我可以显示二级导航。我的问题是，当二级菜单滑下时，使其看起来像丝带的元素的背景不会以块的形式显示，它看起来会先滑下，然后当它完成效果时背景会显示出来。这里是小提琴：提前感谢您的帮助。

浏览 1提问于2012-05-14得票数 0

回答已采纳

1回答

感谢您今天抽出时间来帮助我解决这个CSS问题。我已经按我想要的方式设置了导航菜单(top nav = main-nav)，但是我一直想不出一种方法来将下拉菜单(第二级导航)居中对齐到其父导航项目，而不影响当前的布局或功能。导航列表很难用中间的菜单设置，而且通过Wordpress仍然是动态的。我使用了display:table和display:table-cell的组合来完成此操作。导航的顶层看起来很棒，但下拉的二级却不对齐。任何建议都将不胜感激。提前

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

1回答

如何在wordpress主题中改变背景大小/缩放？

、、

我有一个使用wordpress主题的网页：问题是:你能看到横向菜单和文本之间的空白吗？文本和右角之间的空白区域呢？我想删除它，就像缩放到网页的重要部分一样。

浏览 2提问于2017-05-19得票数 0

2回答

更改导航悬停颜色

网址：我已经查看了CSS，但找不到合适的.hover类。我也看了看文件，可能的JPG，我可以只是photoshop，没有运气。谢谢

浏览 0提问于2011-07-06得票数 0

回答已采纳

3回答

CSS Sprite导航问题

、、

我已经建立了一个CSS雪碧图导航。除非UL列表的顺序与样式表的顺序不同，或者不使用所有的li元素，否则导航功能正常。

浏览 1提问于2012-05-15得票数 0

4回答

类似于CSS3的.click()的？

、、、

我使用纯CSS导航已经有几年了，最近我们开始在我工作的公司建立一些移动网站。我真的很想继续使用纯CSS，注意依赖于jQuery，但在移动网站上，下拉菜单不能正常工作。在CSS3中有没有类似于jQuery的.click();事件？基本上，当用户单击导航链接时，我希望下拉菜单打开并保持打开状态。我试着到处找，但似乎什么也找不到。

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

回答已采纳

1回答

水平下拉导航纯css

、、、、

我在一个具有水平下拉导航的网站上工作，但它不像它应该的那样工作。网址是：background:#fff url(..

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

4回答

在纯css下拉菜单中解决问题

、

我最近使用Google tutorials创建了一个纯css下拉菜单。如果我给第二级ul留出一个小的空白处，当你在ul和parent li之间的间隙上悬停时，下拉菜单就会消失。

浏览 1提问于2012-09-17得票数 2

回答已采纳

2回答

纯CSS导航有问题

、

小提琴在这里： </ul> </ul> </ul>CSS

浏览 2提问于2011-06-03得票数 1

回答已采纳

1回答

限制顶级类别上的可过滤属性

、、、

问题是，如果一个人导航到第二级类别之一，比如男性类别，他/她将被呈现大量用于过滤的属性，其中大多数属性在这个级别上是不合适的。对于这些二级类别(例如男性和女性)，我想限制在分层导航中显示的可过滤属性的数量，而不会失去按子类别中的“隐藏”属性进行过滤的能力。继续这个示例，我希望在西装->男装类别中购物时，分层导航中提供品牌等属性，而不是Toe (来自Boot属性集)或Sleeve_Type (来自衬衫属性集)等属性。此外，我希望在西装->男装->靴类别中购物时，属性Toe在分层<

浏览 4提问于2013-11-27得票数 1

1回答

我需要一些简单的设置html/css菜单或js

、、、

这是我的二级菜单，在用户滚动过我的标题和导航栏之后，我希望它停留在我想要的地方，然后用滚动条停留在窗口的顶部。webkit-sticky;position: -ms-sticky;position: sticky;但我希望二级菜单的“粘性”从我的标题和导航栏开始。下面是一个示例：我尝试了这个插件，但它对我不起作用，而且我也希望网站只是html css，这就是分配的内容。谢谢

浏览 1提问于2014-03-18得票数 0

2回答

如何使用css制作此导航栏？

、、

我在Photoshop中设计了这个导航栏，我不知道如何将它转换为纯css导航栏，有人会有什么想法吗？

浏览 5提问于2011-04-07得票数 3

1回答

Server 2012 AlwaysOn可用性组(主动/被动)

、、

我有一个主副本和一个二级副本关于WSFC和AAG配置。这两个节点都是物理机器，并与自动故障转移同步。二级副本是可读的，我们在其上运行维护任务，但现在我们希望将“可读二级”设置保持为“否”而不是“可读”，并将维护作业移至主副本，从而使二级副本变为纯被动节点而不是主动节点，从而节省了授权成本。我的问题是-将可读的二级副本设置更改为“否”是否会使其成为被动节点？

浏览 0提问于2016-03-23得票数 1

1回答

在滑块上浮动水平导航

我有一个带有二级导航的，我需要将它漂浮在滑块的顶部，或者留出空间，这样二级导航就不会在滑块下面。致以敬意，

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

1回答

Windows 8辅助磁贴针脚

、

但是从二级磁贴的导航效果并不好。也就是说，假设我们从一个页面"A“定位，然后导航到另一个页面"B"，当点击二级磁贴时，它导航到页面"B”。这是一个问题，或者我们是否应该在创建磁贴时在任何地方指定导航参数？

浏览 2提问于2012-07-11得票数 0

回答已采纳

2回答

如何在Next.js中添加bulma.css切换导航栏？

、

我已经在我的Next.js项目中添加了bulma.css，并且一切运行正常，但是导航栏切换不起作用，因为需要添加一些纯javascript代码，而React不提供纯DOM事件

浏览 0提问于2018-10-21得票数 1

1回答

使2级纯CSS下拉菜单在1级菜单项上方悬停时出现

我已经使用纯CSS编码创建了一个导航栏，而根本没有JavaScript编码。但我在浏览器界面上有一个问题。当我用鼠标悬停在第一级菜单项(主菜单项的AKA子菜单)上时，我想让我的二级菜单项出现。但是根据目前的情况，当我悬停在名为“在线服务”的主菜单项上时，我可以同时看到第一级菜单项“沟通”和相应的第二级菜单项列表，称为“电子邮件”、“即时通讯”和“社交网络”！因此，正如我上面所说的，当主菜单项“”悬停时，我想隐藏第二级菜单项。但是，我只想使它出现，当第一级菜单项，“沟通”是根据上述的现状徘

浏览 1提问于2016-11-27得票数 0

回答已采纳

1回答