0
任何人都明白为什么我的下拉菜单表现得像这样？ （按下菜单右侧的汉堡包）。显然，这是问题的定位，但是，我需要它在同一时间固定在顶部，所以我有点超出选项...如果我已经正确理解定位...CSS固定下拉菜单表现怪异
$('.hamburger').click(function(e){
\t \t
\t \t e.preventDefault();
\t
\t \t if ($("#menu").is(":visible")) {
\t \t
\t \t \t /* MENU FADES IN */
\t \t \t $(".hamburger").removeClass('is-active');
\t \t \t $("#menu").slideUp(400);
\t \t \t
\t \t \t $(".page-1-heading, .play-logo").fadeIn(500);
\t \t \t $('.respm1, .respm2, .respm3, .respm4, .respm5, .respm6').toggleClass("animate");
\t \t \t
\t \t } else {
\t \t
\t \t \t /* MENU FADES OUT */
\t \t \t $(".hamburger").addClass('is-active');
\t \t \t $('.respm1, .respm2, .respm3, .respm4, .respm5, .respm6').toggleClass("animate");
\t \t \t $("#menu").slideDown(400);
\t \t \t
\t \t \t $(".page-1-heading, .play-logo").fadeOut();
\t \t \t
\t \t }
\t
\t });#responsive-menu {
\t \t position: fixed;
\t \t background-color: #000000;
\t \t width: 100%;
\t \t top: 0;
\t \t left: 0;
\t \t z-index: 999;
\t }
.logo-2 {
\t \t position: relative;
\t \t float: left;
\t \t top: 12px;
\t \t left: 4%;
\t \t z-index: 999;
\t \t font-family: 'Helvetica-Neue', sans-serif;
\t \t color:rgba(255,255,255,1);
\t \t width: auto;
\t \t height: 35px;
\t \t
\t \t transition: all 1s ease-out;
\t \t -webkit-transition: all 1s ease-out;
\t }
.hamburger {
\t position: relative;
\t float: right;
\t right: 5%;
\t z-index: 999;
\t opacity: 1;
\t cursor: pointer;
\t transition-property: opacity, filter;
\t transition-duration: 0.15s;
\t transition-timing-function: linear;
\t font: inherit;
\t color: inherit;
\t text-transform: none;
\t background-color: transparent;
\t border: 0;
\t overflow: visible;
\t margin-bottom: 20px;
}
#menu {
\t \t display: none;
\t \t width: 100%;
\t \t background-color: #f9f9f9;
\t \t box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
}
#menu a {
\t \t float: none;
\t \t color: black;
\t \t padding: 12px 16px;
\t \t text-decoration: none;
\t \t display: block;
\t \t text-align: left;
\t \t z-index: 4;
\t \t color: #333436;
\t \t text-decoration: none;
\t \t cursor: pointer;
\t \t font-size: calc(13px + 0.3vw);
\t \t text-transform: uppercase;
\t \t letter-spacing: 3px;
\t \t border-radius: 0.2em;
\t \t -webkit-transition: 350ms ease all;
\t \t -moz-transition: 350ms ease all;
\t \t transition: 350ms ease all;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="responsive-menu">
\t \t <div id="wrapper">
\t \t \t <div class="hamburger">
\t \t \t \t <img src="http://goodstuffcommunications.com/wp-content/uploads/2015/08/xheadway-imported-image1.png.pagespeed.ic.rjlAN89gbj.png" class="logo-2" alt="Mountain View">
\t \t \t </div>
\t \t \t <img src="https://upload.wikimedia.org/wikipedia/commons/6/6f/HP_logo_630x630.png" class="logo-2" alt="Mountain View">
\t \t </div>
\t \t \t
\t \t <!-- Menu content below -->
\t \t <div id="menu">
\t \t \t <a href="#">Services</a>
\t \t \t <a href="#">Clients</a>
\t \t \t <a href="#">About</a>
\t \t \t <a href="#">Video</a>
\t \t \t <a href="#">Contact</a>
\t \t </div>
</div>
因此，简单优雅的解决方案！ – Lavonen