Question

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

我的代码如下：

<!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下的元素将显示为不悬停或单击。

下图说明了当我的鼠标在下拉列表-1时我得到的输出：

所需输出：当我将鼠标悬停在dropdown-1上时，会出现dropdown-2和dropdown-3。当我单击下拉菜单-2时，只有Link-1和Link-2才会出现。同样，对于下拉-3。

小提琴

请在此处找到fiddle

小提琴中使用的外部资源是： https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js 和 https://www.w3schools.com/w3css/4/w3.css

Answer 1

我认为您正在尝试构建多级菜单，我创建了一个小提琴，看看this

<ul class="nav site-nav">
    <li>
        <a href=#>Lorem</a>
    </li>
    <!--
 -->
    <li>
        <a href=#>Ipsum</a>
    </li>
    <!--
 -->
    <li class=flyout>
        <a href=#>Dolor</a>
        <!-- Flyout -->
        <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>
                <!-- Flyout -->
                <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>
                        <!-- Flyout -->
                        <ul class="flyout-content nav stacked">
                            <li class="flyout-alt">
                                <a href=#>Foo Bar</a>
                                <!-- Flyout -->
                                <ul class="flyout-content nav stacked">
                                    <li>
                                        <a href=#>Bar Baz</a>
                                    </li>
                                    <li class="flyout-alt">
                                        <a href=#>Baz Foo</a>
                                        <!-- Flyout -->
                                        <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>
                                <!-- Flyout -->
                                <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>

w3css - 下拉菜单中的Hoverable Dropdown

1 个答案: