Strange behavior when using transition

HTML & CSS
1

I don’t know say what’s exactly but you can see my code. When I hover li item and mouse out it, then ul sibling doesn’t work properly. Sorry for my bad english.

http://codepen.io/thehung1724/full/gmlfE/

2

Hi, thehung. You will have to describe the problem a little better. Tell more about it. How does the ul sibling not work properly? What should it do? In what browser are you seeing this problem?

3

Hi, thank for replying. That is because of my bad english. I’ll try explain clearly.

The drill down appears below the main drop down while it’s fading in, and then snaps into position once it’s fully opaque.

4

What I see is if you hover over Shirts → Mens → T-Shirts → Shirts
for a brief time the sub-sub appears under the sub.

Sorry, I have no idea how to fix it.

5

Ah, now I remember, this is uncompiled LESS. Not plain CSS. I can’t work with it. Sorry.

6

There’s an option bottom right to view it compiled.

1 Like
7

You said it was there so I kept clicking things until I found it in the upper right bar for that section. Yep, it just screams “Click Me to see a Compiled View”, doesn’t it?

513×592 15.8 KB

Oh, well.

Thanks, @ralphm,

8

Thank you

9

Hope you help me

10

I was referring to the embedded example above, which is a bit clearer (see bottom right):

926×310 24.5 KB

1 Like
11

This is the first time I’ve seen an imbedded view (pretty sure). Never occurred to me that those things were actual buttons. Thought it was just an image taking me to the file on the codepen site. Yes! This is much less “graphically ambiguous” than the mini-icon.

Another even bigger “Thank you” for the explanation, @ralphm .

12

No probs! Yes, I really love this CodePen embed facility.

13

HI,

The problem is that you are animating the sub menu from an auto absolute position and only placing it exactly in hover so you get a transition from auto to top:0 left :100%. Auto absolute elements occupy a position on the page where they would normally be in the flow and then become absolute at that position.

You need to set the initital position.

e.g.

.nav li li ul {left: 100%;	top: 0;}
.nav li li.hover ul {
	visibility: visible;
	opacity: 1;
}
14

Hi, thehung,

So far, I can tell you that it has something to do with the transition property. If transition is commented out, the flickering stops. Usually, that means that the transition “all” is targeting one too many properties. I’m not sure which one that is, at the moment. But I have to get some sleep now. Perhaps you will find the answer before I return

EDIT: @PaulOB to the rescue

15

Thank you. But another problem that when I hover 2nd sub-item, the sibling doesn’t appears correct place.

16

Set the context to the list and not the ul.

.nav li{position:relative}

1 Like
17

Thank you so much. Last question that how I can remove opacity transition when it responsive.

18

Do you mean just the opacity or all transitions?

If you want to remove all transitions then do something like this:

@media screen and (max-width: 768px) {
	.nav li ul {
		-webkit-transition:none;
		-moz-transition:none;
		-o-transition:none;
		transition:none;
	}
}

If you only want a specific transition then list it in the above instead of using ‘all’.

1 Like
19

Thank you so much. It working now.