w3css - 下拉菜单中的可靠下拉菜单

-1

使用w3.css功能，我试图编写一个HTML程序来创建级联下拉菜单，其帮助文档为this教程。w3css - 下拉菜单中的可靠下拉菜单

我的代码如下：

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

所需的输出：当我悬停我的鼠标下拉-1，下拉-2和dropdown- 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

来源

2017-06-13 Sonali Agrawal

你可以请一个工作的小提琴或片段。 – codesayan

那可能是由于你的HTML结构。如果你想要所有的按钮都是同一个“级别”的项目，那么你的结构可能应该反映 - 通过在同一级别有三个独立的元素，而你嵌套2和3的下拉为1。 – CBroe

@CBroe我不喜欢在同一级别上不需要dropdown-1,2,3。我想要2和3下1就像在用户界面。但是，我不希望链接1和链接2仅在点击下拉菜单2或点击下拉菜单3时出现。它不应该出现只是悬停在下拉菜单上-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>

来源

2017-06-13 10:29:30

是的，这就是我想要的！唯一的区别是“Bar Baz”和“Baz Foo”都应该下降。能否通过在我的代码中找出问题来帮助我实现这一目标？我不想改变w3.css的外观和感觉 –

您能为我创作一个小提琴吗？ –

https://jsfiddle.net/sonali9696/ndpatnvt/ 请在这里找到提琴@Manoj –

w3css - 下拉菜单中的可靠下拉菜单

回答

相关问题