I have a menu with one dropdown item. However, I can’t make it work so it open under the associated div item.
Here’s my code :
.dropdown {
position: relative;
}
.dropdown-content {
display: none;
position: relative;
background-color: #f9f9f9;
float: right;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
.top-menu a{
color: black;
float: right;
right:0;
text-align: center;
padding: 24px 26px;
text-decoration: none;
}
[class*="col-"] {
float: left;
padding: 15px;
}
.col-12 {width: 100%; align-items:normal;}
.dropdown:hover .dropdown-content {
display: block;
}<!DOCTYPE html>
<html>
<body>
<div class="col-12">
<header>
<div class="top-menu" id="myTopnav">
<div><a href="#">Item 3</a></div>
<div><a href="#" target="_blank">Item 2</a></div>
<div class="dropdown">
<a>Item 1 (dropdown)</a>
<div class="dropdown-content">
<div><a>1</a></div>
<div><a>2</a></div>
<div><a>3</a></div>
<div><a>4</a></div>
<div><a>5</a></div>
</div>
</div>
</div>
</header>
</div>
</body>
</html>Ideally, the dropdown-content would open directly under Item 1 (dropdown) wherever this item is located (e.g. if Item 1 was to be located on the far right side).