Menu
Good morning everybody,
I’m creating a website and I can’t understand if it’s possible to change a div size simply on hover over another div.
In this page I have a menu with different elements and I’d like to resize the transparent box depending on the element selected. For example, I’d like to mantain the same dimension for all the elements except for the last (blue), that increase the box dimension from 250px to 350px.
This is the main HTML code:
…
<div class=”menu_main”>
<ul class=”menu slide”>
<li><a href=”….” class=”orange”>NAME2</a></li>
<li><a href=”….” class=”blue”>NAME1</a></li>
….
</ul>
<div class=”box”></div>
</div>
…
And the CSS code is:
…..
.menu_main {
float:left;
font:normal bold 11px/35px verdana, sans-serif;
overflow:hidden;
position:relative;
left:50px;
}
.menu_main .box {
-moz-transition-duration:.4s;
-o-transition-duration:.4s;
-webkit-transition-duration:.4s;
background-color:rgba(255, 250, 250, 0.5);
height:0;
width:900px;
}
.menu_main:hover div.box {
height:250px;
}
…
….
.ul.menu li a.blue:hover,ul.menu li:hover a.blue {
background:#c00;
}
….
Thank you very much for your attention. I hope I have been clear