Responsive Navbar Dropdown (Not Bootstrap)

Question

I have this Navbar and it works perfectly in the original mode, and when the screen's width is less than 950px it displays the buttons one under another, but the problem is, dropdown button is also there, which is okay, but it opens the dropdown content somewhere on a totally wrong side. What I wish is to make the dropdown content appear under the dropdown button. Is there something wrong with my code? Any help will be appreciated. My code:

 $(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

Add position:relative to nav ul li and give this css to dropdown

.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

Add position:relative to parent element #dropdownd . Then set position:absolute and top:value styles to child element .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>