Html w3css-下拉菜单中的可悬停下拉菜单_Html_Css_Drop Down Menu_Cascadingdropdown

Html w3css-下拉菜单中的可悬停下拉菜单

html css drop-down-menu

Html w3css-下拉菜单中的可悬停下拉菜单,html,css,drop-down-menu,cascadingdropdown,Html,Css,Drop Down Menu,Cascadingdropdown,使用w3.css功能，我试图在教程的帮助下编写一个HTML程序来创建级联下拉菜单我的代码如下所示： <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta charset="utf-8" /> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.m

使用w3.css功能，我试图在教程的帮助下编写一个HTML程序来创建级联下拉菜单

我的代码如下所示：

<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta charset="utf-8" /> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css"> <title>Query Control Panel</title> </head> <body> <div class="w3-bar w3-black"> <a href="#" class="w3-bar-item w3-button">abc</a> <div class="w3-dropdown-hover"> <button class="w3-button">dropdown-1</button> <div class="w3-dropdown-content w3-card-4"> <div class="w3-bar w3-light-gray"> <div class="w3-dropdown-click"> <button class="w3-button">dropdown-2</button> <div class="w3-dropdown-content w3-bar-block w3-card-4 w3-right"> <a href="#" class="w3-bar-item w3-button">link-1</a> <a href="#" class="w3-bar-item w3-button">link-2</a> </div> </div> </div> <div class="w3-dropdown-click"> <button class="w3-button">dropdown-3</button> <div class="w3-dropdown-content w3-bar-block w3-card-4 w3-left"> <a href="#" class="w3-bar-item w3-button">link-3</a> <a href="#" class="w3-bar-item w3-button">link-4</a> </div> </div> </div> </div> </div> </body> </html>

查询控制面板下拉列表-1 下拉列表-2 下拉列表-3
输出：当我将鼠标悬停在dropdown-1上时，应该分别位于dropdown-2和dropdown-3下的元素将显示，而不悬停或单击
下图显示了鼠标悬停在dropdown-1上时获得的输出：
所需输出：当我将鼠标悬停在dropdown-1上时，应该会出现dropdown-2和dropdown-3。当我单击下拉列表-2时，只有Link-1和Link-2才会出现。同样，对于下拉列表-3
小提琴
请在这里找到
小提琴中使用的外部资源包括：和
我认为您正在尝试构建多级菜单，我已经创建了一个小提琴，请看

你能做一个有用的提琴或片段吗？这很可能是因为你的HTML结构。如果您希望所有按钮都是同一“级别”上的项目，那么您的结构可能会反映这一点-在同一级别上有三个独立的元素，而您在下拉列表中嵌套了2和3作为1。@CBroe我不希望下拉列表-1,2,3在同一级别上。我希望1下面有2和3，就像在UI中一样。但是，我不希望Link-1和Link-2只出现在单击dropdown-2或单击dropdown-3时。它不应该仅仅通过将鼠标悬停在下拉列表上来显示—您正在使用的“教程”仅使用鼠标悬停，而不是单击鼠标。如果您想要的东西只有在单击时才能工作，您需要找到一个不同的教程，解释如何使用CSS实现这一点，或者您需要使用JavaScript在元素上注册一个单击处理程序，并相应地更改它们的样式。否。你必须把它贴在这里，而不是明天可以改变或消失的第三方网站。是的，这正是我想要的！唯一的区别是“Bar Baz”和“Baz Foo”都应该有下拉列表。你能帮我找到我代码中的问题吗？我不想更改w3.css的外观。请您为我创建一个提琴好吗？我无法更改上面的提琴，但我制作了类似的导航栏。请查看一下。谢谢您的帮助！请给我一个例子，在一个下拉列表中有两个下拉列表，例如，使“Action”和“dropdown”（在菜单-1下）都有下拉元素。@ManojKadolkar您可能应该解释一下您是如何修复它的，或者您做了哪些不同的操作。“给一个人一条鱼，你就喂他一天；教一个人钓鱼，你就喂他一天
<ul class="nav site-nav"> <li> <a href=#>Lorem</a> </li>  <li> <a href=#>Ipsum</a> </li>  <li class=flyout> <a href=#>Dolor</a>  <ul class="flyout-content nav stacked"> <li> <a href=#>Foo Bar</a> </li> <li> <a href=#>Bar Baz</a> </li> <li class="flyout-alt"> <a href=#>Baz Foo</a>  <ul class="flyout-content nav stacked"> <li> <a href=#>Foo Bar</a> </li> <li> <a href=#>Bar Baz</a> </li> <li class="flyout-alt"> <a href=#>Baz Foo</a>  <ul class="flyout-content nav stacked"> <li class="flyout-alt"> <a href=#>Foo Bar</a>  <ul class="flyout-content nav stacked"> <li> <a href=#>Bar Baz</a> </li> <li class="flyout-alt"> <a href=#>Baz Foo</a>  <ul class="flyout-content nav stacked"> <li> <a href=#>Bar Baz</a> </li> <li> <a href=#>Baz Foo</a> </li> <li> <a href=#>Foo Bar</a> </li> </ul> </li> <li> <a href=#>Foo Bar</a> </li> <li> <a href=#>Foo Bar</a> </li> </ul> </li> <li> <a href=#>Bar Baz</a> </li> <li class="flyout-alt"> <a href=#>Baz Foo</a>  <ul class="flyout-content nav stacked"> <li> <a href=#>Bar Baz</a> </li> <li> <a href=#>Baz Foo</a> </li> </ul> </li> </ul> </li> </ul> </li> </ul>