Z index - Hover menu - html

Question

Im using a platform that only accepts html / css in line, and i was asked to make somehow a dropdown menu, where when i hover on one element, it resize it and there is an image show on it. The problem is that when i hover on one element, i cant hover and resize the second one, unless i take the mouse over this.
I tried to move backwards the hover elements with z index -1, but the transition got really bugged and goes up and down constantly.
<div id="mapa-expanduno"></div>
<div id="mapa-expanddos"></div>
<div id="mapa-expandtres"></div>
<div id="mapa-expandcuatro"></div>
<style type="text/css">
div {
position: absolute;
}
#mapa-expanduno {
border: 1px solid blue;
margin-left: 55px;
width: 110px;
height: 125px;
}
#mapa-expanduno:hover {
width:914px;
height: 450px;
margin-left: 0px;
background: url();
background-repeat: no-repeat;
}
#mapa-expanddos {
border: 1px solid red;
margin-left: 286px;
width: 110px;
height: 125px;
}
#mapa-expanddos:hover {
width:914px;
height: 450px;
z-index: -1;
margin-left: 0px;
background: url();
background-repeat: no-repeat;
}
#mapa-expandtres {
border: 1px solid lightgreen;
margin-left: 518px;
width: 110px;
height: 125px;
}
#mapa-expandtres:hover {
width:914px;
height: 450px;
z-index: -1;
margin-left: 0px;
background: url();
background-repeat: no-repeat;
}
#mapa-expandcuatro {
border: 1px solid black;
margin-left: 750px;
width: 110px;
height: 125px;
}
#mapa-expandcuatro:hover {
width:914px;
height: 450px;
margin-left: 0px;
background: url();
background-repeat: no-repeat;
}
</style>
Demo
Thanks on advice.

Answer 1

I'd switch to a sibling relationship:
div {
position: absolute;
}
.outer {
cursor: pointer;
width: 110px;
height: 125px;
}
.inner {
position: fixed;
top: 0;
left: 0;
width: 914px;
height: 450px;
z-index: -1;
display: none;
}
#mapa-expanduno {
border: 1px solid blue;
margin-left: 10%;
}
#mapa-expanduno:hover + .inner {
display: block;
background: url(http://lorempixel.com/1200/900/nature/4);
background-repeat: no-repeat;
}
#mapa-expanddos {
border: 1px solid red;
margin-left: 30%;
}
#mapa-expanddos:hover + .inner {
display: block;
background: url(http://lorempixel.com/1200/900/nature/3);
background-repeat: no-repeat;
}
#mapa-expandtres {
border: 1px solid lightgreen;
margin-left: 50%;
}
#mapa-expandtres:hover + .inner {
display: block;
background: url(http://lorempixel.com/1200/900/nature/2);
background-repeat: no-repeat;
}
#mapa-expandcuatro {
border: 1px solid black;
margin-left: 70%;
}
#mapa-expandcuatro:hover + .inner {
display: block;
background: url(http://lorempixel.com/1200/900/nature/1);
background-repeat: no-repeat;
}
<div class="outer" id="mapa-expanduno"></div>
<div class="inner"></div>
<div class="outer" id="mapa-expanddos"></div>
<div class="inner"></div>
<div class="outer" id="mapa-expandtres"></div>
<div class="inner"></div>
<div class="outer" id="mapa-expandcuatro"></div>
<div class="inner"></div>
<div id="preloader" style="position: absolute; left: -999em;">
<img src="http://lorempixel.com/1200/900/nature/3" />
<img src="http://lorempixel.com/1200/900/nature/4" />
<img src="http://lorempixel.com/1200/900/nature/1" />
<img src="http://lorempixel.com/1200/900/nature/2" />
</div>
JSFiddle demo
Here's a version with some transitions.

Answer 2

I don't know if this is helpful because the question is unclear, but I'll attempt to help.
It is hard to know exactly what's going on here without your HTML.
You can add a "> [desired element to change]" selector after your ":hover" selector.
so it would be something like
parent_element{
margin-left: 750px;
width: 110px;
height: 125px;
background: url();
background-repeat: no-repeat;
}
parent_element:hover > child_element{
width:914px;
height: 450px;
margin-left: 0px;
background: url();
background-repeat: no-repeat;
}
If it is not a child element you will have to use JavaScript to make the changes.
You might also consider using transitions in your css, which would make the box grow.