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

如何在下拉菜单下创建下拉菜单

4 个答案: