我已经建立了我的第一个真正的网站几天了，我解决了几个问题，但我现在只能使用移动下拉菜单。
这是网站：www.bibliot-tech.nl
我希望列表项目在菜单中向下滑动，菜单的其余部分也相应地滑动。
$(document).ready(function(){
$("#li1").click(function(){
$(".dd1").slideToggle("fast");
$('.dd2').slideUp();
});
$("#li2").click(function(){
$(".dd2").slideToggle("fast");
$('.dd1').slideUp();
});
$('.bgOverlay').click(function () {
$('.dd1').slideUp();
$('.dd2').slideUp();
$('ul').slideUp();
});
});
$(document).ready(function(){
$("#nav-toggle").click(function(){
$("ul").slideToggle(1);
$('.dd1').slideUp();
$('.dd2').slideUp();
});
});
.navbar {
position: fixed;
height: 3em;
width: 100%;
background-color: rgba(0,0,0,0.5);
z-index: 1;
}
.navbar ul {
position: relative;
display: none;
top: 100%;
right:-20%;
height: 0;
list-style: none;
font-size: 160%;
}
.navbar ul li {
position: relative;
width: 60%;
background-color: rgba(0,0,0,0.5);
border-top: none;
text-indent: 10px;
color: gray;
border-bottom: 1px solid rgba(254,254,254,0.1);
}
.navbar ul li:hover {
background-color: rgba(0,0,0,0.6);
}
.navbar ul li a{
text-decoration: none;
color: rgba(254,254,254,1);
font-weight: 100;
}
.navbar ul ul ul, .navbar ul ul ul li {
display: none;
}
.navbar ul ul, .navbar ul ul li {
position: relative;
font-size: 100%;
background-color: rgba(0,0,0,0);
}
li:last-child {
border-radius: 0px 0px 10px 10px;
}
li:first-child {
border-top: 1px solid rgba(254,254,254,0.3);
}
.dd1 {
display: none;
position: relative;
width: 100%;
height: 100%;
z-index: 1;
}
.dd1 li {
font-size: 100%;
background-color: rgba(0,0,0,0)
}
.dd2 {
display: none;
position: relative;
width: 100%;
height: 20%;
background-color: rgba(0,0,0,0.5);
z-index: 1;
}
#nav-toggle {
position: absolute;
right: 10px;
top: 25%;
}
#nav-toggle {
cursor: pointer;
padding: 10px 35px 16px 0px;
z-index: 5;
}
#nav-toggle span, #nav-toggle span:before, #nav-toggle span:after {
cursor: pointer;
border-radius: 1px;
height: 3px;
width: 35px;
background: rgba(254,254,254,0.9);
position: absolute;
display: block;
content: '';
opacity: 0.9;
}
#nav-toggle span:before {
top: -10px;
}
#nav-toggle span:after {
bottom: -10px;
}
#nav-toggle span, #nav-toggle span:before, #nav-toggle span:after {
transition: all 500ms ease-in-out;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<div class="navbar">
<a id="nav-toggle"><span></span></a>
<ul>
<li id="li1"><a href="3d.html">3d printing</a>
<ul>
<div class="dd1">
<li><a href="#">blueprints</a>
<ul>
<li style="border-radius: 0px 10px 10px 10px;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla erat purus, hendrerit eget mi sit amet, tempus auctor arcu. Duis vehicula nunc et lectus maximus facilisis. In elementum hendrerit cursus. Morbi egestas at justo sed dictum. Suspendisse sed tortor nec ligula tristique pellentesque. Donec facilisis luctus quam, eu luctus leo. In in feugiat arcu. Pellen</li>
</ul>
</li>
<li><a href="#">information</a>
<ul>
<li style="border-radius: 0px 10px 10px 10px;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla erat purus, hendrerit eget mi sit amet, tempus auctor arcu. Duis vehicula nunc et lectus maximus facilisis.</li>
</ul>
</li>
<li class="noTransition"><a href="#">Software</a>
<ul>
<li style="border-radius: 0px 10px 10px 10px;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla erat purus, hendrerit eget mi sit amet, tempus auctor arcu. Duis vehicula nunc et lectus maximus facilisis. In elementum hendrerit cursus. Morbi egestas at justo sed dictum. Suspendisse sed tortor nec ligula tristique pellentesque. Donec facilisis luctus quam, eu luctus leo. In in feugiat arcu. </li>
</ul>
</li>
</div>
</ul>
</li>
<li id="li2"><a href="#">computing</a>
<ul>
<div class="dd2">
<li><a href="#">hardware</a>
<ul>
<li style="border-radius: 0px 10px 10px 10px;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla erat purus, hendrerit eget mi sit amet, tempus auctor arcu. Duis vehicula nunc et lectus maximus facilisis. In elementum hendrerit cursus. Morbi egestas at justo sed dictum. Suspendisse sed tortor nec ligula tristique pellentesque. Donec facilisis luctus quam, eu luctus leo. In in feugiat arcu.</li>
</ul>
</li>
<li><a href="#">information</a>
<ul>
<li style="border-radius: 0px 10px 10px 10px;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla erat purus, hendrerit eget mi sit amet, tempus auctor arcu. Duis vehicula nunc et lectus maximus facilisis.</li>
</ul>
</li>
<li class="noTransition"><a href="#">software</a>
<ul>
<li style="border-radius: 0px 10px 10px 10px;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla erat purus, hendrerit eget mi sit amet, tempus auctor arcu. Duis vehicula nunc et lectus maximus facilisis. In elementum hendrerit cursus. Morbi egestas at justo sed dictum. Suspendisse sed tortor nec ligula tristique pellentesque. Donec facilisis luctus quam, eu luctus leo. In in feugiat arcu. </li>
</ul>
</li>
</div>
</ul>
</li>
<li><a href="#">virtual</a></li>
</ul>
</div>
尝试下面的更新代码，它可能会对您有所帮助。
$("#nav-toggle").click(function(){
event.preventDefault();
$("#dropMenu").toggle();
})
$(".level1-menu > li > a").on("click",function(){
event.preventDefault();
$(this).siblings(".level2-menu").toggle(".level2-menu");
});
$(".level2-menu > li > a").on("click",function(){
event.preventDefault();
$(this).siblings(".level3-menu").toggle(".level3-menu");
});.navbar {
position: fixed;
height: 3em;
width: 100%;
background-color: rgba(0,0,0,0.5);
}
#nav-toggle {
position: absolute;
right: 10px;
top: 25%;
cursor: pointer;
padding: 10px 35px 16px 0px;
}
#nav-toggle span, #nav-toggle span:before, #nav-toggle span:after {
cursor: pointer;
border-radius: 1px;
height: 3px;
width: 35px;
background: rgba(254,254,254,0.9);
position: absolute;
display: block;
content: '';
opacity: 0.9;
}
#nav-toggle span:before {
top: -10px;
}
#nav-toggle span:after {
bottom: -10px;
}
#dropMenu{
display : none;
position: relative;
width: 60%;
background-color: rgba(0,0,0,0.5);
top: 100%;
right: -20%;
padding: 0;
transition-property: all;
transition-duration: .5s;
transition-timing-function: cubic-bezier(0, 1, 0.5, 1);
}
#dropMenu li{
list-style-type : none;
}
#dropMenu ul{
padding : 5px;
}
ul.level1-menu li a {
text-decoration: none;
color: rgba(254,254,254,1);
font-weight: 100;
font-size: 160%;
}
.level2-menu,.level3-menu{
display : none;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.1/jquery.min.js"></script>
<div class="navbar">
<a id="nav-toggle"><span></span></a>
<div id="dropMenu">
<ul class="level1-menu">
<li><a href="3d.html">3d printing</a>
<ul class="level2-menu">
<li><a href="3d.html">blueprints</a>
<ul class="level3-menu">
<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla erat purus, hendrerit eget mi sit amet, tempus auctor arcu. Duis vehicula nunc et lectus maximus facilisis. In elementum hendrerit cursus. Morbi egestas at justo sed dictum. Suspendisse sed tortor nec ligula tristique pellentesque. Donec facilisis luctus quam, eu luctus leo. In in feugiat arcu. Pellen</li>
</ul>
</li>
</ul>
</li>
<li><a href="#">CSS</a>
<ul class="level2-menu">
<li><a href="3d.html">blueprints</a>
<ul class="level3-menu">
<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla erat purus, hendrerit eget mi sit amet, tempus auctor arcu. Duis vehicula nunc et lectus maximus facilisis. In elementum hendrerit cursus. Morbi egestas at justo sed dictum. Suspendisse sed tortor nec ligula tristique pellentesque. Donec facilisis luctus quam, eu luctus leo. In in feugiat arcu. Pellen</li>
</ul>
</li>
</ul>
</li>
<li><a href="#">JavaScript</a></li>
</ul>
</div>
</div>