Make sure content inside of relative element is behaving properly - html

Question

I have a problem with regarding of position: relative;. If I use it then all the content inside of it is has weird width and it is not scaling in regards to elements.
Better to show an example. Here I have a simple pop-up navigation that is showing when I hover over a link.
I want the navigation to be showing underneath the link
I want the navigation items underneath to be positioned correctly (not under each other)
Solution is to use JavaScript and on hover get the position of the link and place the underlying elements into correct position. I don't like this approach too much so I wonder if there is a different way.
You can comment out the $(this).find('.container').css('left', left); line to see what I'm talking about.
// I don't want to use JavaScript but it seems the only way
$(function() {
$('.link').on('mouseover', function() {
var left = $(this).position().left;
$(this).find('.container').css('left', left);
});
});
// If .link will be "position: relative;" then the red blocks will be positioned wrongly (down)
// If I use JavaScript then... ..well.. then I use JavaScript
.link {
width: 100px;
height: 100px;
background: green;
display: inline-block;
float: left;
margin: 12px;
cursor: pointer;
/* position: relative; */
}
.link:hover .container {
display: block;
}
.link .container {
position: absolute;
left: 0px;
margin-top: 112px;
display: none;
}
.link .container .box {
width: 200px;
height: 200px;
display: inline-block;
background: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="link">
<div class="container">
<div class="row">
<div class="box"></div>
<div class="box"></div>
</div>
<div class="row">
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
</div>
</div>
</div>
<div class="link">
<div class="container">
<div class="row">
<div class="box"></div>
<div class="box"></div>
</div>
<div class="row">
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
</div>
</div>
</div>
<div class="link">
<div class="container">
<div class="row">
<div class="box"></div>
<div class="box"></div>
</div>
<div class="row">
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
</div>
</div>
</div>
Fiddle: https://jsfiddle.net/qkgvrtnn/

Answer 1

You should remove the left:0px;
.link .container {
position: absolute;
//left: 0px;
margin-top: 112px;
display: none;
}
Which is causing for the block to be locked at the left side of the outside container, if you add the relative position to .link, it will align correctly, but the problem is that container will inherit its width.... so therefore it would not have auto width, which you want.
So you either remove the left and rely on the outer most container width, or use javascript, because you would need to have a fixed .container width to achieve this.