# Positioning a content below a drop down button

**URL:** <https://forum.freecodecamp.org/t/positioning-a-content-below-a-drop-down-button/335452>\
**Category:** General\
**Created:** [December 23, 2019, 7:12pm UTC](https://forum.freecodecamp.org/t/positioning-a-content-below-a-drop-down-button/335452 "2019-12-23T19:12:19Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![ThaKuu](https://avatars.discourse-cdn.com/v4/letter/t/e95f7d/32.png) [@ThaKuu](https://forum.freecodecamp.org/u/ThaKuu)\
**Post date:** [December 23, 2019, 7:12pm UTC](https://forum.freecodecamp.org/t/positioning-a-content-below-a-drop-down-button/335452/1 "2019-12-23T19:12:19Z")

</div>

Hi! I am super happy last night while I was taking a shower I thought of solution of a problem I had and it WORKED!!! Its the first time I’ve thought of a solution and made it work. Basically making my menu visible on hover. Ive been trying for a few hours now on the 2nd part of the problem. But I need a hint.

Problem: My drop down menu wont position it self as “block” or drop down, instead its side by side(link1, link2, link3) . I have no idea where to start with this, can someone give me the theory/hint on how I am suppose to be thinking about it? I have commented out my solution to the visibility part until I can position the links below the dropdown button.

My CSS

```auto
body {
	background-color: #ff794d;
}

.main {
  margin-top: 50px;
}

/*.dropdown-content {
	visibility: hidden;
}

.dropdown:hover .dropdown-content{
	visibility: visible;
}*/

.dropdown-content a {
	display: block;
}

.topnav {
	background-color: #333;
	overflow: hidden;
	position: fixed;
	top: 0;
	width: 100%;

}
.topnav a {
	float: left;
	color: #f2f2f2;
	text-align: justify;
	padding: 14px 16px;
	text-decoration: none;
	font-size: 17px;
}

.topnav a:hover {
	background-color: #ddd;
	color: black;
}

.topnav a#active {
  background-color: #4CAF50;
  color: white;
}

```

My HTML

```auto
<!DOCTYPE html>
<html>
<head>
	<title> Practice Part 2</title>
	<link rel="stylesheet" href="style.css">
</head>
<body>
	<header>
		<div class="topnav">
			<a id="active" href="#Home">Home</a>
			<a href="#News">News</a>
			<a href="#about">About</a>
			<a href="#Contact">Contact</a>
			<div class="dropdown">
 				<a href="#Contact">Dropdown</a>
 				<div class="dropdown-content">
   					<a href="#">Link 1</a>
   					<a href="#">Link 2</a>
   					<a href="#">Link 3</a>
 				</div>
			</div> 
		</div>
	</header>

	<div class="main">
	</div>
</body>
</html>

```

---

<div class="post-metadata">

**Author:** ![lasjorg](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/lasjorg/32/280761_2.png) [@lasjorg](https://forum.freecodecamp.org/u/lasjorg)\
**Post date:** [December 23, 2019, 8:04pm UTC](https://forum.freecodecamp.org/t/positioning-a-content-below-a-drop-down-button/335452/2 "2019-12-23T20:04:22Z")

</div>

1. Move the `.dropdown-content a` selector below the rule it should be overwriting and remove the float using `float: none`

2. You can make `dropdown` position relative and then `dropdown-content` position absolute. You now need to position the dropdown (using the offsets top/left).

3. You have to remove overflow hidden from `.topnav`.

Personally I’d suggest you use flexbox instead of floats.

---

<div class="post-metadata">

**Author:** ![ILM](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/ilm/32/363239_2.png) [@ILM](https://forum.freecodecamp.org/u/ILM)\
**Post date:** [January 16, 2021, 11:29am UTC](https://forum.freecodecamp.org/t/positioning-a-content-below-a-drop-down-button/335452/3 "2021-01-16T11:29:45Z")

</div>