[英]How to create dropdown under a dropdown menu
我想要一个下拉菜单,该菜单可以继续下拉,但与其向下切换,不如向下下拉至该图片右侧
我当前的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样式可以使其正确吗?
您可以像这样简单地做到这一点:
.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>
希望以下内容对您有所帮助。
* { 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>
这是示例(遵循路径建议-> 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>
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
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.