Avoid fluttering on mouse hover - html

Question

I am trying to make a left nav menu for my web page, which is to look something like the following image:
Here is the jsfiddle of the problem I am facing. http://jsfiddle.net/rzr4Z/
My html looks like the following
<ul id="nav">
<li>First<img src="images/navbar-icons/first.png" />
</li>
<li>Second<img src="images/navbar-icons/second.png" />
</li>
<li>Third<img src="images/navbar-icons/third.png" /> <img
src="images/navbar-icons/third.png" />
<ul id="side-menu">
<li><img src="images/navbar-icons/submenu-img.png" alt="sub menu image" />
</li>
<li>Sub-menu item 1</li>
<li>Sub-menu item 2</li>
<li>Sub-menu item 1</li>
</ul></li>
<li>Fourth<img src="images/navbar-icons/fourth.png" />
</li>
</ul>
CSS:
ul#nav {
list-style-type: none;
margin: 10px 0;
padding: 0;
text-align: center;
}
ul#nav li {
font-size: 250%;
line-height: 25px;
padding: 7px 0;
margin: 0;
}
ul#nav li a {
display: block;
}
ul#nav li a:link,ul#nav li a:visited {
color: #333333;
text-decoration: none;
}
ul#nav li a:hover,ul#nav li a:active {
color: #a61607;
text-decoration: none;
}
ul#nav li img {
display: none;
}
ul#nav a:hover#first_id+img {
display: block;
position: relative;
top: -25px;
}
ul#nav a:hover#second_id+img {
display: block;
position: relative;
top: -25px;
}
ul#nav a:hover#third_id+img {
display: block;
position: relative;
top: -25px;
}
ul#nav a:hover#fourth_id+img {
display: block;
position: relative;
top: -25px;
}
ul#nav li ul#side-menu {
display: none;
position: absolute;
}
ul#nav li:hover ul#side-menu {
font-size: 30%;
list-style-type: none;
line-height: 2px;
color: #a61607;
text-decoration: none;
display: block;
position: absolute;
top: 310px;
left: 250px;
}
ul#nav li:hover ul#side-menu li {
float: none;
}
ul#nav li:hover ul#side-menu li img {
position: absolute;
top: 400px;
left: 0px;
}
Instead of doing something like,
ul#nav a:hover+img {
display: block;
position: relative;
top: -25px;
}
I had to use different ID's for each of the li elements in the css because each of the rollover image has a different size and width so that I could adjust them individually for their correponding rollover positions. Is using different ID's for each of the menu items the right way to get the desired effect?
The main problem however is when I hover the images for each of the menu items, I start getting a fluttering effect, and the hover effect doesn't look easy to the eyes with that kind of fluttering.
The images for the sub-menu (the sub-menu items do appear, but the img doesn't appear) also doesn't appear when hovering over #third-page menu item.
Any suggestions on how to resolve this fluttering, and getting the correct effects for this menu?

Answer 1

Using different IDs is fine in your case. As for the fluttering problem, I was able to eliminate it by changing this part of your CSS:
ul#nav a:hover#first_id+img {
display: block;
position: relative;
top: -25px;
}
ul#nav a:hover#second_id+img {
display: block;
position: relative;
top: -25px;
}
ul#nav a:hover#third_id+img {
display: block;
position: relative;
top: -25px;
}
ul#nav a:hover#fourth_id+img {
display: block;
position: relative;
top: -25px;
}
to this:
ul#nav li:hover #first_id+img {
display: block;
}
ul#nav li:hover #second_id+img {
display: block;
}
ul#nav li:hover #third_id+img {
display: block;
}
ul#nav li:hover #fourth_id+img {
display: block;
}
What was happening was, when you hover over the third link, the size of the image would push the link so that it was centered within the li. And if your mouse happened to be hovering to the left or right of the link once the image appeared, you weren't hovering over the link anymore, so it would disappear, then immediately reappear because now you are again hovering over the link... etc.
Detecting the :hover over the li itself fixes this so that the image appears if you are hovering over the li itself, regardless of if you are hovering over the link, image, or any space around them.
Hope this helps.

Answer 2

The trick to fixing your issue is two things:
1) Make the LI items fixed-width
2) Make the "hover" effect occur on the LI, not on the A
The reason you are experiencing "flicker" is exactly what's been described above. When you are applying the :hover effect to the A tag, and the tags aren't fixed in size, you wind up in some positions where your mouse causes the :hover, the :hover moves the object that caused it out from under the mouse - and that causes the effect to end, putting the object back under the mouse - which causes it again. Endless cause'n'effect which gives you flicker.
By putting the :hover effect on the LI instead, you cause the :hover to be raised whether the mouse is over the A OR the IMG - so when the IMG tag pops visible and everything shifts size, your mouse is still hovering over the LI that contains both elements - and voila - no flicker.
There is another issue caused by your approach, however, due to the size of the images. Because your images are shunting things downward due to their height (big images) - when you get to the bottom of the image, and roll over the next LI - everything will shift out from under your mouse and cause a similar issue. This, however, will generally not cause flicker per-se.
Please see the following update to your jsFiddle.
As you will see, the "height" issue occurs on the "Third" entry. This, too, is solvable by explicitly setting height / width and using images of an exact size - OR (more effectively) by using background: url(...); CSS rules rather than IMG tags - because they are far easier to clip / resize.
If you need an example of some other CSS-based rollover menus with sub-menus, please take a look at this jsFiddle, which demonstrates a more modular approach to dropdown menus and such. It could be modified to suit your needs pretty easily with the use of background graphics.

Answer 3

This problem happens when we do not specify following css attributes:
min-width, max-width, and
min-height, max-height
And carefully using the following css attributes can help:
#parent_id:hover
{
//use borders to find space required for correct width/height
}
#parent_id>#child_id:hover
{
//use borders to find space required for correct width/height
}
#parent_id:hover, #child_id:hover
{
//use borders to find space required for correct width/height
}
So make sure that you add these.
Remember this always:
Never do css without borders, always make sure that you add borders to almost all nodes,
this helps to clearly understand how much space is being occupied and it is more easy to workout errors in css like this
ul#nav {
list-style-type: none;
margin: 0;
padding: 0;
text-align: center;
position:absolute;
height:300px;
width:200px;
max-height:300px;
max-width:200px;
border:5px solid red;
overflow:hidden;
}
ul#nav li {
border:1px solid green;
font-size: 250%;
line-height: 25px;
max-height:200px;
padding: 7px 0;
margin-top: 10px;
max-height:50px;
}
ul#nav li a {
border:1px solid black;
}
ul#nav li a:link,ul#nav li a:visited {
color: #333333;
text-decoration: none;
}
ul#nav li a:hover,ul#nav li a:active {
max-height:50px;
color: #a61607;
text-decoration: none;
}
ul#nav li img {
display: none;
}
ul#nav a:hover#first_id+img {
display: block;
}
ul#nav a:hover#second_id+img {
display: block;
}
ul#nav a:hover#third_id+img {
display: block;
}
ul#nav a:hover#fourth_id+img {
display: block;
}
ul#nav li ul#side-menu {
display: none;
}
ul#nav li:hover ul#side-menu {
font-size: 30%;
list-style-type: none;
line-height: 2px;
color: #a61607;
text-decoration: none;
display: block;
position: absolute;
top: 310px;
left: 250px;
}
ul#nav li:hover ul#side-menu li {
float: none;
}
ul#nav li:hover ul#side-menu li img {
position: absolute;
width:48px;
height:48px;
top: 400px;
left: 0px;
}​
Now it is not fluttering

Answer 4

Your code:
ul#nav {
list-style-type: none;
margin: 0;
padding: 0;
text-align: center;
position:absolute;
max-height:300px;
max-width:200px;
border:5px solid red;
overflow:hidden;
}
My code:
ul#nav {
list-style-type: none;
margin: 0;
padding: 0;
text-align: center;
position:absolute;
height:300px;
width:200px;
max-height:300px;
max-width:200px;
border:5px solid red;
overflow:hidden;
}
Carefully look at my last answer, you have missed significant attributes like height:300px; and width:200px;
Simply specifying max,min-prefixed attributes is not enough, you should add specific height and width settings, only then fluttering disappears.

Answer 5

You can either do:
ul#nav li a{display: block;}
or
ul#nav li{text-align: left;}
so mouseleave doesn't fire on mouseenter