Question

我正在尝试进行dropdown导航，而现在我正试图只将一个menu添加到dropdown，但他们都会这样做。这是我的所有代码： 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向上滑动（那些不应该）时，它们会超过标题div。很难解释，但如果你把它放在文本编辑器中并运行它然后单击home选项，你会注意到我的意思。如果这是我必须单独解决的问题，请告诉我如何。谢谢。

Answer 1

如果你能找到一种方法来定位 .dropdownContactUs 和 .dropdownDashboard 而不使用花车，他们将停止使用 dropdownHome上下移动。他们现在向上滚动的原因是因为它们被浮动并且它们相对于容器的位置（ body ），容器只会下降到足以包含 .dropdownHome 这意味着当它向上移动时，它们也必须向上移动。请记住，使用浮动时，它会从文档流中获取元素，这意味着它们不会影响页面上任何元素的大小。反过来，它们可以通过其他所有位置来实现。

Jquery .slide切换导航菜单。所有菜单都滑动，我只想要一个

1 个答案: