Problems with grid - html

Question

I have created a grid. Each item in this grid has a drawer menu coming out of it downwards on hover. What happens on hover is that all items below get pushed down, i want only the item directly underneath to push down.
Url to this site: http://esgu.no/dev/unicef/menupage.htm
My HTML
<div class="grid alef">
<div class="card w33">
<img src="assets/3.jpg">
<div class="orange subm">
Barns rettigheter
</div>
<ul class="acti obord">
<li>Historie</li>
<li>Barnas rettigheter i Norge</li>
</ul>
</div>
<div class="card w33">
<img src="assets/3.jpg">
<div class="pink subm">
Unicef og barn i verden
</div>
<ul class="acti pbord">
<li>Dette er unicef</li>
<li>Fakta om barn</li>
<li>Barnearbeid</li>
</ul>
</div>
<div class="card w33">
<img src="assets/3.jpg">
<div class="green subm">
Unicef-runden
</div>
<ul class="acti gbord">
<li>Meld på skolen</li>
<li>Bilder fra runden</li>
</ul>
</div>
<div class="card w33">
<img src="assets/3.jpg">
<div class="lblue subm">
FN´s bærekraftsmål
</div>
</div>
<div class="card w33">
<img src="assets/3.jpg">
<div class="red subm">Til deg som er fadder</div>
<ul class="acti rbord">
<li>Faddertips</li>
<li>Faddertesten</li>
<li>Fadderquiz</li>
<li>Aktivitetshjul</li>
<li>Fadderrebus</li>
<li>Fadderkryssord</li>
</ul>
</div>
<div class="card w33">
<img src="assets/3.jpg">
<div class="yellow subm">
Kryssord og andre nøtter
</div>
<ul class="acti ybord">
<li>Kryssord</li>
<li>Puslespill</li>
<li>Rebus</li>
</ul>
</div>
<div class="card w33">
<img src="assets/3.jpg">
<div class="dblue subm">
Du kan
</div>
</div>
</div>
My grid CSS
.grid{width:100%;margin:0 auto;padding:40px 10%;font-size:0;text-align:center}.grid > li{width:auto;height:auto;padding:0}
.grid > *{display:inline-block;vertical-align:top;width:100%;font-size:14px;font-size:1rem;padding:20px}

Answer 1

The only way I can think of, is to create 3 UL's and float them left, with a 33.3% width each. Each LI would then be 100%, stacking on top of each other. When you hover over one, it will only push down that UL.
This may not be a valid solution for you but may be an avenue worth exploring!
See this for a quick example - http://codepen.io/conormcafee/pen/MKgdZg
<ul>
<li>Link</li>
<li>Link</li>
<li>Link</li>
</ul>
<ul>
<li>Link</li>
<li>Link<span>Show me</span></li>
<li>Link</li>
</ul>
<ul>
<li>Link</li>
<li>Link</li>
<li>Link</li>
</ul>
ul {
display: block;
float: left;
width: 33.3%;
}
li span {
display: none;
color: red;
}
li:hover span {
display: block;
}