CODEWITHSUNDEEP
htmlcss
nemo_87
nemo_87

Reputation: 4791

Position of drop down menu using only CSS and HTML

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">
		<a href="#">EVENTS IN ZG</a>
	  </div>
	  <button class="dropbtn">FIND US</button>
	</div>

Upvotes: 1

Views: 2235

Answers (2)

UkFLSUI
UkFLSUI

Reputation: 5672

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">
      <a href="#">EVENTS IN ZG</a>
    </div>
  </div>
  <button class="dropbtn">FIND US</button>
</div>

Upvotes: 1

Nikhil
Nikhil

Reputation: 3950

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"><a href="#">Home</a></li>
      <li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown" href="#">Page 1 <span class="caret"></span></a>
        <ul class="dropdown-menu">
          <li><a href="#">Page 1-1</a></li>
          <li><a href="#">Page 1-2</a></li>
          <li><a href="#">Page 1-3</a></li>
        </ul>
      </li>
      <li><a href="#">Page 2</a></li>
      <li><a href="#">Page 3</a></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/

Upvotes: 1

Related Questions