如何在下拉菜單下創建下拉菜單

Question

我想要一個下拉菜單，該菜單可以繼續下拉，但與其向下切換，不如向下下拉至該圖片右側

我知道如何創建僅在此圖片下方的下拉菜單

我當前的HTML代碼：

<div class="nav navbar-fixed-top">
  <ul>
    <li class="home"><a href="#">Home</a></li>
    <li class="tutorials"><a href="#">Consumer Management</a>
      <ul>
        <li class="tuto2"><a href="#">www.e-homes.com.my</a></li>
          <ul>
            <li><a href="#">hehe</a></li>
          </ul>
        </ul>
      </li>

我目前的CSS樣式：

.nav li {

  font-size: 1.2em;
  text-align: left;
  width: 220px;
  line-height: 60px;
  font-size: 1.4em;
  display: inline-block;
  margin-right: -7px;
 }

.nav a {

  text-decoration: none;
  color: #fff;
  display: block;
  padding-left: 15px;
  transition: .3s background-color;
 }

.nav a:hover {
  background-color: #005f5f;
 }


.nav li li {
  font-size: .8em;
 }



 @media screen and (min-width: 650px) {

 .nav > ul > li {
   text-align: center;
  }

.nav > ul > li > a {
  padding-left: 0;
  }

.nav li ul {
  position: absolute;
  display: none;
  width: inherit;
  }

.nav li:hover ul {
  display: block;
 }

.nav li ul li {
  display: block;
   }
 }

有人知道CCS樣式可以使其正確嗎？

Answer 1

您可以像這樣簡單地做到這一點：

 .outer {display: inline-flex; flex-direction: column} .tutorials > ul, .tuto2 > ul {display: none} .tutorials:hover > ul, .tuto2:hover > ul {display: inline-block} 

 <ul class="outer"> <li class="home"><a href="#">Home</a></li> <li class="tutorials"><a href="#">Consumer Management</a> <ul> <li class="tuto2"><a href="#">www.e-homes.com.my</a> <ul> <li><a href="#">hehe</a></li> </ul> </li> </ul> </li> </ul> 

Answer 2

希望以下內容對您有所幫助。

 * { box-sizing: border-box; } ul { margin: 0; padding: 0; list-style: none; } li { padding: 1rem; position: relative; max-width: 200px; width: 200px; } li:not(:last-child) { border-bottom: thin solid white; } li>a { color: white; } .main>li { background-color: blue; } .sub>li { background-color: red; } .subsub>li { background-color: green; } .sub, .subsub { display: none; } .main>li:hover>.sub, .sub>li:hover>.subsub { display: inline-block; position: absolute; top: 0; right: -200px; } 

 <div class="nav"> <ul class="main"> <li class="home"><a href="#">Home</a></li> <li class="tutorials"><a href="#">Consumer Management</a> <ul class="sub"> <li class="tuto2"><a href="#">www.e-homes.com.my</a> <ul class="subsub"> <li><a href="#">hehe</a></li> </ul> </li> </ul> </li> </ul> </div> 

Answer 3

這是示例（遵循路徑建議-> APL和產品），其中的下拉列表將在右側打開。 希望能幫助到你。

 $('.child').hide(); //Hide children by default $('.parent').children().click(function () { event.preventDefault(); $(this).children('.child').slideToggle('slow'); $(this).find('span').toggle(); }); 

 html, body { margin:0; padding:0; height:100%; } * {box-sizing: border-box;} .container { height:100%; } a { color:#fff; text-decoration:none; border-bottom:1px dotted #fff; padding:0px 0px 20px 0px; width:100%; display:block; height:100%; } li { padding:20px 20px 0 20px; width:100%; color:#fff; } .container ul {height:100%;} .container > ul { width:250px; background-color:#224490; position:relative; overflow:visible; } .container > ul > li {} .container > ul > li:hover {background-color:#0f1e41;} .container > ul > li > ul { display:none; position:absolute; right:-250px; top:0; width:250px; background-color:#18316a; } .container > ul > li:hover > ul { display:block; } .container > ul > li > ul >li:hover {background-color:#0f1e41;} .container > ul > li > ul > li > ul { display:none; position:absolute; right:-250px; top:0; width:250px; background-color:#112551; } .container > ul > li > ul > li:hover ul { display:block; } .container > ul > li > ul > li > ul > li:hover {background-color:#0f1e41;} .container > ul > li > ul > li ul li ul li { border-bottom:1px dotted #fff; padding:20px; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script> <div class="container"> <ul class=""> <li class=""> <a tabindex="-1" href="#">Advice</a> <ul class=""> <li class=""> <a href="#">APL & Products</a> <ul class="parent"> <li > <a href="#"> Product List </a> <ul class="child"> <li >Platforms</li> <li >Funds</li> <li >Protection</li> <li >Securities</li> </ul> </li> <li ><a href="#">Portfolios</a></li> <li ><a href="#">Non-approved Products</a></li> </ul> </li> <li class=""><a tabindex="-1" href="#">Pre-advice</a></li> <li class=""><a href="#">Strategy & Technical</a></li> <li class=""><a href="#">Research</a></li> <li class=""><a href="#">Implementation</a></li> <li class=""><a href="#">Review</a></li> <li class=""><a href="#">Execution Only</a></li> </ul> </li> <li ><a href="#">Technology</a></li> <li ><a href="#">Personal Development</a></li> <li ><a href="#">Practice</a></li> <li ><a href="#">News</a></li> </ul> </div> 

Answer 4

HTML代碼

<div class="container">
  <h2>Multi-Level Dropdowns</h2>
  <p>In this example, we have created a .dropdown-submenu class for multi-level dropdowns (see style section above).</p>
  <p>Note that we have added jQuery to open the multi-level dropdown on click (see script section below).</p>                                        
  <div class="dropdown">
    <button class="btn btn-default dropdown-toggle" type="button" data-toggle="dropdown">Tutorials
    <span class="caret"></span></button>
    <ul class="dropdown-menu">
      <li><a tabindex="-1" href="#">HTML</a></li>
      <li><a tabindex="-1" href="#">CSS</a></li>
      <li class="dropdown-submenu">
        <a class="test" tabindex="-1" href="#">New dropdown <span class="caret"></span></a>
        <ul class="dropdown-menu">
          <li><a tabindex="-1" href="#">2nd level dropdown</a></li>
          <li><a tabindex="-1" href="#">2nd level dropdown</a></li>
          <li class="dropdown-submenu">
            <a class="test" href="#">Another dropdown <span class="caret"></span></a>
            <ul class="dropdown-menu">
              <li><a href="#">3rd level dropdown</a></li>
              <li><a href="#">3rd level dropdown</a></li>
            </ul>
          </li>
        </ul>
      </li>
    </ul>
  </div>
</div>

CSS代碼

.dropdown-submenu {
    position: relative;
}

.dropdown-submenu .dropdown-menu {
    top: 0;
    left: 100%;
    margin-top: -1px;
}

jQuery的

$(document).ready(function(){
  $('.dropdown-submenu a.test').on("click", function(e){
    $(this).next('ul').toggle();
    e.stopPropagation();
    e.preventDefault();
  });
});

如果您對創建下拉鏈接有疑問，可以參考此鏈接https://www.w3schools.com/bootstrap/tryit.asp?filename=trybs_ref_js_dropdown_multilevel_css&stacked=h