Position of drop down menu using only CSS and HTML - html

Question

Is it possible to position drop down menu under specific button, and not first one by default using only css?
For example, how to but drop down under forth button instead of first one (under INFO instead HOSTEL button)? I know that people usually use <ul> and <li> elements when creating drop downs, but I am interested is it possible to choose a position when using <button> element.
.dropbtn {
background-color: #000000;
color: white;
padding: 8px;
font-size: 9px;
width: 80px;
margin-right: 5px;
font-family: 'Istok Web', sans-serif;
border: none;
cursor: pointer;
}
.dropdown {
position: relative;
display: inline-block;
float: left;
top: 6.7%;
margin-left: 5px;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #95e5c4;
font-family: 'Istok Web', sans-serif;
text-align: center !important;
font-size: 9px;
width: 80px;
box-shadow: 0px 6px 12px 0px rgba(0,0,0,0.2);
z-index: ;
}
.dropdown-content a {
color: black;
padding: 8px 12px;
text-decoration: none;
display: block;
}
.dropdown-content a:hover {background-color: #e6e6e6}
.dropdown:hover .dropdown-content {
display: block;
}
<div class="dropdown">
<button class="dropbtn">HOSTEL</button>
<button class="dropbtn">RESERVATION</button>
<button class="dropbtn">GALLERY</button>
<button class="dropbtn">INFO</button>
<div class="dropdown-content">
EVENTS IN ZG
</div>
<button class="dropbtn">FIND US</button>
</div>

Answer 1

Adding margin-left to the dropdown-content class can be a good choice but may not be the best one. And obviously you have to calculate the value of margin which fits for your actual case. In the example you provided, setting
margin-left to 267px looks fine, I guess.
Edit:
As, OP stated that screen resolutions can be an issue, here's the pure css solution without using any extra margin.
.dropbtn {
background-color: #000000;
color: white;
padding: 8px;
font-size: 9px;
width: 80px;
margin-right: 5px;
font-family: 'Istok Web', sans-serif;
border: none;
cursor: pointer;
}
.dropdown {
display: inline-block;
float: left;
top: 6.7%;
margin-left: 5px;
}
.dropdown-content {
display: none;
background-color: #95e5c4;
font-family: 'Istok Web', sans-serif;
text-align: center !important;
font-size: 9px;
width: 80px;
box-shadow: 0px 6px 12px 0px rgba(0, 0, 0, 0.2);
}
.dropdown-content-parent {
display: inline-block;
position: relative;
}
.dropdown-content a {
color: black;
padding: 8px 12px;
text-decoration: none;
display: block;
}
.dropdown-content a:hover {
background-color: #e6e6e6
}
.dropdown:hover .dropdown-content {
display: block;
position: absolute;
}
<div class="dropdown">
<button class="dropbtn">HOSTEL</button>
<button class="dropbtn">RESERVATION</button>
<button class="dropbtn">GALLERY</button>
<div class="dropdown-content-parent">
<button class="dropbtn">INFO</button>
<div class="dropdown-content">
EVENTS IN ZG
</div>
</div>
<button class="dropbtn">FIND US</button>
</div>

Answer 2

you can use bootstrap's navbar for it like this:
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">WebSiteName</a>
</div>
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown" href="#">Page 1 <span class="caret"></span></a>
<ul class="dropdown-menu">
<li>Page 1-1</li>
<li>Page 1-2</li>
<li>Page 1-3</li>
</ul>
</li>
<li>Page 2</li>
<li>Page 3</li>
</ul>
</div>
</nav>
<div class="container">
<h3>Navbar With Dropdown</h3>
<p>This example adds a dropdown menu for the "Page 1" button in the navigation bar.</p>
</div>
see it on full screen: https://jsfiddle.net/gmy1Lwfj/