響應式Navbar下拉（不引導）

Question

我有這個Navbar，它在原始模式下工作得很好，當屏幕寬度小於950px時，它會顯示一個在另一個下面的按鈕，但問題是，下拉按鈕也在那里，這沒關系，但它會打開下拉列表內容在一個完全錯誤的一面。 我希望讓下拉內容顯示在下拉按鈕下。 我的代碼有問題嗎？ 任何幫助將不勝感激。 我的代碼：

 $(function() { var ulLi = $('nav ul > li'); var fa = $('nav ul > li:last-of-type a .fa'); $('nav ul').append('<ol></ol>'); $('nav').each(function() { for (var i = 0; i <= ulLi.length - 3; i++) { $('nav ul > ol').append("<li>" + i + "</li>"); $('nav ul > ol > li').eq(i).html(ulLi.eq(i + 1).html()); } }); $('#attr_nav').click(function() { $('nav ul > li:last-of-type').parent().children('ol').slideToggle(500); }); }); 

 * { box-sizing: border-box; -o-box-sizing: border-box; -ms-box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; } nav ul li a { color: #FFF; text-decoration: none; font-size: 16px; -webkit-transition-duration: 0.4s; transition-duration: 0.4s; padding: 15px; font-family: Ubuntu; } nav ul li a:hover { text-decoration: none; color: #444; } .thum { background-color: gray; } nav ul li a.coinsnumber:hover { text-decoration: none; color: white; cursor: pointer; } #attr_nav .dropdown-contentd { position: relative; } #dropdownd .dropdown-contentd { /* display: none;*/ max-height: 0; transition: max-height 0.15s ease-out; overflow: hidden; position: absolute; top: 49px; background-color: royalblue; color: #FFF; /* min-width: 160px;*/ box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19); z-index: 1; /*border: 1px solid black;*/ margin: 0; padding: 0; /* padding-top: 10px; padding-bottom: 10px;*/ /* transition: all .3s ease;*/ } #dropdownd:hover .dropdown-contentd { max-height: 500px; transition: max-height 0.25s ease-in; /* padding-top: 10px; padding-bottom: 10px; padding-left: 10px; padding-right: 10px;*/ } .a-padding { padding-left: 10px; padding-right: 10px; } /*nav ul li .dropdownd:hover .dropdown-contentd { max-height: 500px; transition: max-height 0.25s ease-in; }*/ .dropdown-contentd a { float: none; color: black; padding: 12px 16px; color: #ffffff; text-decoration: none; display: block; text-align: left; transition: all .3s ease; background-color: royalblue; } .dropdown-contentd a:hover { color: #444; } .dropdownd:hover .dropdown-contentd { display: block; } /* End General */ /* Start Navbar */ nav ul { background-color: royalblue; box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19); } nav ul>li { padding-left: 20px; padding-right: 20px; padding: 15px; display: inline-block; transition: all .3s ease; margin-left: -5px } nav ul>ol { position: absolute; top: 49px; right: 0; background: royalblue; text-align: center; list-style: none; display: none; box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19); } nav ul>ol>li { width: 100vw; color: #FFF; margin: 0; padding: 0; padding-top: 10px; padding-bottom: 10px; transition: all .3s ease; } nav ul>ol>li:hover a { margin: 20px; } nav ul>ol>li:hover { color: #444; cursor: pointer } #attr_nav:hover { cursor: pointer; } nav ul input { opacity: .7; padding: 5px; float: right; display: none } /* Start Menue Right */ /* Start Media Query */ @media screen and (max-width:950px) { nav ul>li:not(:first-child) { display: none; } nav ul>li:nth-last-of-type(2) { display: inline-block; } nav ul>li:last-of-type { display: inline-block; } } @media screen and (max-width:370px) { nav ul>li:first-child { display: none; } } @media screen and (max-width:270px) { nav ul>li:last-of-type { display: none; } } @media screen and (min-width:950px) { nav ul>ol>li { display: none } nav ul>li:nth-last-of-type(2) { display: none } } .dropdowncontentn { background-color: royalblue; } 

 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" /> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script> <nav> <ul> <li><a href="home.php">Home</a></li> <li><a href="earnpoints.php">Earn Coins</a></li> <li><a href="getrewards.php">Get Rewards</a></li> <li><a href="referrals.php">Referrals</a></li> <li><a href="vouchers.php">Vouchers</a></li> <li> <div id="dropdownd"> <a href="#" class="dropbtnd">More</a> <i class="fa fa-caret-down"></i> <div class="dropdown-contentd"> <a class="dropdowncontentn a-padding" href="leaderboard.php">Leaderboard</a> <a class="dropdowncontentn a-padding" href="partnerships.php">Partnerships</a> <a class="dropdowncontentn a-padding" href="contact.php">Contact us</a> <a class="dropdowncontentn a-padding" href="socialmedia.php">Social Media</a> <a class="dropdowncontentn a-padding" href="settings.php">Settings</a> </div> </div> </li> <li> <a id="attr_nav"> <i class="fa fa-bars"></i> </a> </li> <li class="thum" style="float:right;margin-right:25px;"> <a onClick="navbar_coins_refresh.php" class="coinsnumber"> <?php include 'navbar_coins.php'; ?> </a> </li> </ul> </nav> 

Answer 1

添加位置：相對於nav ul li並將此css提供給下拉列表

.dropdown-contentd{
  width:100%;
} 

.dropdown-contentd a{
  text-align:center;
}

 $(function() { var ulLi = $('nav ul > li'); var fa = $('nav ul > li:last-of-type a .fa'); $('nav ul').append('<ol></ol>'); $('nav').each(function() { for (var i = 0; i <= ulLi.length - 3; i++) { $('nav ul > ol').append("<li>" + i + "</li>"); $('nav ul > ol > li').eq(i).html(ulLi.eq(i + 1).html()); } }); $('#attr_nav').click(function() { $('nav ul > li:last-of-type').parent().children('ol').slideToggle(500); }); }); 

 * { box-sizing: border-box; -o-box-sizing: border-box; -ms-box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; } nav ul li a { color: #FFF; text-decoration: none; font-size: 16px; -webkit-transition-duration: 0.4s; transition-duration: 0.4s; padding: 15px; font-family: Ubuntu; } nav ul li a:hover { text-decoration: none; color: #444; } nav ul li{ position:relative } .thum { background-color: gray; } nav ul li a.coinsnumber:hover { text-decoration: none; color: white; cursor: pointer; } #attr_nav .dropdown-contentd { position: relative; } #dropdownd .dropdown-contentd { /* display: none;*/ max-height: 0; transition: max-height 0.15s ease-out; overflow: hidden; position: absolute; top: 49px; background-color: royalblue; color: #FFF; /* min-width: 160px;*/ box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19); z-index: 1; /*border: 1px solid black;*/ margin: 0; padding: 0; /* padding-top: 10px; padding-bottom: 10px;*/ /* transition: all .3s ease;*/ } #dropdownd:hover .dropdown-contentd { max-height: 500px; transition: max-height 0.25s ease-in; /* padding-top: 10px; padding-bottom: 10px; padding-left: 10px; padding-right: 10px;*/ } .a-padding { padding-left: 10px; padding-right: 10px; } /*nav ul li .dropdownd:hover .dropdown-contentd { max-height: 500px; transition: max-height 0.25s ease-in; }*/ .dropdown-contentd a { float: none; color: black; padding: 12px 16px; color: #ffffff; text-decoration: none; display: block; text-align: left; transition: all .3s ease; background-color: royalblue; } .dropdown-contentd a:hover { color: #444; } .dropdownd:hover .dropdown-contentd { display: block; } /* End General */ /* Start Navbar */ nav ul { background-color: royalblue; box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19); } nav ul>li { padding-left: 20px; padding-right: 20px; padding: 15px; display: inline-block; transition: all .3s ease; margin-left: -5px } nav ul>ol { position: absolute; top: 49px; right: 0; background: royalblue; text-align: center; list-style: none; display: none; box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19); } nav ul>ol>li{ width: 100vw; color: #FFF; margin: 0; padding: 0; padding-top: 10px; padding-bottom: 10px; transition: all .3s ease; } .dropdown-contentd{ width:100%; } .dropdown-contentd a{ text-align:center; } nav ul>ol>li:hover a { margin: 20px; } nav ul>ol>li:hover { color: #444; cursor: pointer } #attr_nav:hover { cursor: pointer; } nav ul input { opacity: .7; padding: 5px; float: right; display: none } /* Start Menue Right */ /* Start Media Query */ @media screen and (max-width:950px) { nav ul>li:not(:first-child) { display: none; } nav ul>li:nth-last-of-type(2) { display: inline-block; } nav ul>li:last-of-type { display: inline-block; } } @media screen and (max-width:370px) { nav ul>li:first-child { display: none; } } @media screen and (max-width:270px) { nav ul>li:last-of-type { display: none; } } @media screen and (min-width:950px) { nav ul>ol>li { display: none } nav ul>li:nth-last-of-type(2) { display: none } } .dropdowncontentn { background-color: royalblue; } 

 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" /> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script> <nav> <ul> <li><a href="home.php">Home</a></li> <li><a href="earnpoints.php">Earn Coins</a></li> <li><a href="getrewards.php">Get Rewards</a></li> <li><a href="referrals.php">Referrals</a></li> <li><a href="vouchers.php">Vouchers</a></li> <li> <div id="dropdownd"> <a href="#" class="dropbtnd">More</a> <i class="fa fa-caret-down"></i> <div class="dropdown-contentd"> <a class="dropdowncontentn a-padding" href="leaderboard.php">Leaderboard</a> <a class="dropdowncontentn a-padding" href="partnerships.php">Partnerships</a> <a class="dropdowncontentn a-padding" href="contact.php">Contact us</a> <a class="dropdowncontentn a-padding" href="socialmedia.php">Social Media</a> <a class="dropdowncontentn a-padding" href="settings.php">Settings</a> </div> </div> </li> <li> <a id="attr_nav"> <i class="fa fa-bars"></i> </a> </li> <li class="thum" style="float:right;margin-right:25px;"> <a onClick="navbar_coins_refresh.php" class="coinsnumber"> <?php include 'navbar_coins.php'; ?> </a> </li> </ul> </nav> 

Answer 2

添加position:relative對於父元素#dropdownd 。 然后將position:absolute和top:value樣式設置為子元素.dropdown-contentd

 $(function() { var ulLi = $('nav ul > li'); var fa = $('nav ul > li:last-of-type a .fa'); $('nav ul').append('<ol></ol>'); $('nav').each(function() { for (var i = 0; i <= ulLi.length - 3; i++) { $('nav ul > ol').append("<li>" + i + "</li>"); $('nav ul > ol > li').eq(i).html(ulLi.eq(i + 1).html()); } }); $('#attr_nav').click(function() { $('nav ul > li:last-of-type').parent().children('ol').slideToggle(500); }); }); 

 * { box-sizing: border-box; -o-box-sizing: border-box; -ms-box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; } nav ul li a { color: #FFF; text-decoration: none; font-size: 16px; -webkit-transition-duration: 0.4s; transition-duration: 0.4s; padding: 15px; font-family: Ubuntu; } nav ul li a:hover { text-decoration: none; color: #444; } .thum { background-color: gray; } nav ul li a.coinsnumber:hover { text-decoration: none; color: white; cursor: pointer; } #attr_nav .dropdown-contentd { position: relative; } /* add this */ #dropdownd { position:relative } #dropdownd .dropdown-contentd { /* display: none;*/ max-height: 0; transition: max-height 0.15s ease-out; overflow: hidden; /* start: i changed here */ position: absolute; top: 30px; left: 0; right: 0; margin: 0 auto; /* this line optional...horizontal centering for absolute element */ min-width: 160px;max-width: 250px; /* end */ background-color: royalblue; color: #FFF; box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19); z-index: 1; /*border: 1px solid black;*/ padding: 0; /* padding-top: 10px; padding-bottom: 10px;*/ /* transition: all .3s ease;*/ } #dropdownd:hover .dropdown-contentd { max-height: 500px; transition: max-height 0.25s ease-in; /* padding-top: 10px; padding-bottom: 10px; padding-left: 10px; padding-right: 10px;*/ } .a-padding { padding-left: 10px; padding-right: 10px; } /*nav ul li .dropdownd:hover .dropdown-contentd { max-height: 500px; transition: max-height 0.25s ease-in; }*/ .dropdown-contentd a { float: none; color: black; padding: 12px 16px; color: #ffffff; text-decoration: none; display: block; text-align: left; transition: all .3s ease; background-color: royalblue; } .dropdown-contentd a:hover { color: #444; } .dropdownd:hover .dropdown-contentd { display: block; } /* End General */ /* Start Navbar */ nav ul { background-color: royalblue; box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19); } nav ul>li { padding-left: 20px; padding-right: 20px; padding: 15px; display: inline-block; transition: all .3s ease; margin-left: -5px } nav ul>ol { position: absolute; top: 49px; right: 0; background: royalblue; text-align: center; list-style: none; display: none; box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19); } nav ul>ol>li { width: 100vw; color: #FFF; margin: 0; padding: 0; padding-top: 10px; padding-bottom: 10px; transition: all .3s ease; } nav ul>ol>li:hover a { margin: 20px; } nav ul>ol>li:hover { color: #444; cursor: pointer } #attr_nav:hover { cursor: pointer; } nav ul input { opacity: .7; padding: 5px; float: right; display: none } /* Start Menue Right */ /* Start Media Query */ @media screen and (max-width:950px) { nav ul>li:not(:first-child) { display: none; } nav ul>li:nth-last-of-type(2) { display: inline-block; } nav ul>li:last-of-type { display: inline-block; } } @media screen and (max-width:370px) { nav ul>li:first-child { display: none; } } @media screen and (max-width:270px) { nav ul>li:last-of-type { display: none; } } @media screen and (min-width:950px) { nav ul>ol>li { display: none } nav ul>li:nth-last-of-type(2) { display: none } } .dropdowncontentn { background-color: royalblue; } 

 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" /> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script> <nav> <ul> <li><a href="home.php">Home</a></li> <li><a href="earnpoints.php">Earn Coins</a></li> <li><a href="getrewards.php">Get Rewards</a></li> <li><a href="referrals.php">Referrals</a></li> <li><a href="vouchers.php">Vouchers</a></li> <li> <div id="dropdownd"> <a href="#" class="dropbtnd">More</a> <i class="fa fa-caret-down"></i> <div class="dropdown-contentd"> <a class="dropdowncontentn a-padding" href="leaderboard.php">Leaderboard</a> <a class="dropdowncontentn a-padding" href="partnerships.php">Partnerships</a> <a class="dropdowncontentn a-padding" href="contact.php">Contact us</a> <a class="dropdowncontentn a-padding" href="socialmedia.php">Social Media</a> <a class="dropdowncontentn a-padding" href="settings.php">Settings</a> </div> </div> </li> <li> <a id="attr_nav"> <i class="fa fa-bars"></i> </a> </li> <li class="thum" style="float:right;margin-right:25px;"> <a onClick="navbar_coins_refresh.php" class="coinsnumber"> <?php include 'navbar_coins.php'; ?> </a> </li> </ul> </nav>