我正在尝试创建一个下拉导航，现在我正在尝试将一个菜单添加到下拉，但它们都这样做。这是我的全部代码:
HTML:
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<link href='http://fonts.googleapis.com/css?family=Ramabhadra' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Khand:700' rel='stylesheet' type='text/css'>
<link rel='stylesheet' href='style.css'/>
<script src='script.js'></script>
</head>
<body>
<div class="header">
<ul class="cats">
<li class="listItems" id="home">Home</li>
<li class="listItems" id="dashboard">Dashboard</li>
<li class="listItems" id="contactUs">Contact Us</li>
</ul>
</div>
<div class='dropdownHome'>
<ul class="catLists">
<li class="catListItem">Event Calender</li><br>
<li class="catListItem">Bookings</li><br>
<li class="catListItem">Picture Gallery</li><br>
<li class="catListItem">Login</li><br>
<li class="catListItem">Sign Up</li>
</ul>
</div>
<div class="dropdownDashboard">
<ul class="catLists">
<li class="catListItem">Saved Info</li><br>
<li class="catListItem">Friends</li><br>
<li class="catListItem">Document</li><br>
<li class="catListItem">Profile</li><br>
<li class="catListItem">Account</li>
</ul>
</div>
<div class="dropdownContactUs">
<ul class="catLists">
<li class="catListItem">Email</li><br>
<li class="catListItem">Forum</li><br>
<li class="catListItem">Phone-numbers</li><br>
<li class="catListItem">Facebook</li><br>
<li class="catListItem">Twitter</li>
</ul>
</div>
</body>
</html>
CSS:
.header {
background-color:black;
height:50px;
border-radius:10px;
z-index:1;
}
li {
color:white;
display:inline;
width:100%
}
.cats {
padding:6px;
width:100%;
font-size:29px;
font-family: 'Khand', sans-serif;
}
.cats .listItems:hover {
width:100px;
font-size:29px;
font-family: 'Khand', sans-serif;
color:#96F29C;
display:inline;
position:relative;
padding-left:70px;
}
.cats .listItems:active {
width:100px;
font-size:29px;
font-family: 'Khand', sans-serif;
color:#318A29;
display:inline;
position:relative;
padding-left:70px;
}
.listItems {
padding:70px;
}
.dropdownHome {
height:200px;
width:180px;
background-color:#9E9E9E;
position:relative;
left:18px;
bottom:10px;
border:2px solid black;
z-index:-1;
border-radius:13px;
}
.dropdownDashboard {
height:200px;
width:180px;
background-color:#9E9E9E;
position:relative;
right:290px;
bottom:214px;
border:2px solid black;
z-index:-1;
float:right;
border-radius:13px;
}
.dropdownContactUs {
height:200px;
width:180px;
background-color:#9E9E9E;
position:relative;
left:140px;
bottom:214px;
border:2px solid black;
z-index:-1;
float:right;
border-radius:13px;
}
.catLists {
font-size:18px;
text-align:center;
position:relative;
right:20;
font-family: 'Ramabhadra', sans-serif;
}
.catListItem {
color:black;
}
Javascript:
$(document).ready(function(){
$('#home').click(function(){
$('.dropdownHome').slideToggle('slow');
});
});
我的问题最初是不同的，但现在我解决了其他问题，我需要知道如何解决这个问题。我认为我最初的问题将得到解决的另一件事是，当其他两个 dropdown menus 向上滑动(不应该的)时，它们会超出标题分区这很难解释，但如果您将其放入文本编辑器并运行它然后单击主页选项，您会注意到我的意思。如果这是我必须单独解决的问题，请告诉我如何解决。谢谢。
最佳答案
如果您能找到一种方法来定位 .dropdownContactUs 和 .dropdownDashboard 而不使用 float ，它们将停止随着 dropdownHome 上下移动强>。它们现在向上滚动的原因是因为它们是 float 的并且它们相对于容器(body)的位置，容器只会向下滚动足够远以包含.dropdownHome> 这意味着当它向上移动时，它们也必须向上移动。请记住，使用 float 时，它将元素从文档流中取出，这意味着它们不会影响页面上任何元素的大小。反过来，它们也会受到其他所有东西的放置位置的影响。
关于javascript - Jquery .slide切换导航菜单。所有菜单都可以滑动，但我只想要一个，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/29573519/