文章/答案/技术大牛

发布

社区首页 >问答首页 >w3css -下拉菜单中的Hoverable下拉菜单

问w3css -下拉菜单中的Hoverable下拉菜单
EN

Stack Overflow用户

提问于 2017-06-13 09:19:25

回答 1查看 2.5K关注 0票数 0

使用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>

Output：当我在下拉-1上悬停时，应该分别出现在下拉-2和下拉-3下的元素，不会出现悬停或单击。

下面的图像说明了当鼠标下垂时所得到的输出：

想要的输出：当我把鼠标悬停在下拉-1，下拉-2和下拉-3应该出现。当我单击下拉-2时，只有链接-1和链接-2才会出现.同样，对于下拉-3。

Fiddle

请在这里找到小提琴

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

html

css

drop-down-menu

cascadingdropdown

回答 1

Stack Overflow用户

发布于 2017-06-13 10:29:30

我想你正在尝试构建多层次菜单，我已经创建了一个小提琴--看看这

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

票数 1

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/44517273

复制

相似问题

问w3css -下拉菜单中的Hoverable下拉菜单
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问w3css -下拉菜单中的Hoverable下拉菜单EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问w3css -下拉菜单中的Hoverable下拉菜单
EN