I am facing an issue with my gwt menu bar. I want to make it so that when I hover over a menu item, only that specific item grows in size. However, the problem is that when I use CSS to adjust the height of the hovered item, all menu items are affected. Has anyone found a solution to animate or transition on the menubar using CSS?
Below is the CSS code I have been using:
.menuBar .gwt-MenuItem:hover {
height: 30px;
transition: height 1s;
-moz-transition: height 1s; /* Firefox 4 */
-webkit-transition: height 1s; /* Safari and Chrome */
-o-transition: height 1s; /* Opera */
}
My goal is to achieve a dynamic resizing effect when hovering over a menu item, similar to what is depicted in this image: