How to use HTML and CSS implementation mouse slip in the drop-down menu?-CodePudding

RT, how to use HTML and CSS implementation mouse slip in the drop-down menu, what is thinking?

CodePudding user response:

 
 
 
 
<meta HTTP - equiv="X - UA - Compatible" content="IE=edge, chrome=1"/& gt; 
<meta charset="utf-8"/& gt; 
<style type="text/CSS" & gt; 
# # menu, the menu ul {
margin: 0; 
padding: 0; 
The list - style - type: none; 
} 
# menu> Li {
position: relative; 
width: 100px; 
Height: 20 px; 
float: left; 
Background - color: # 9 ff; 
The transition: background - 300 ms color; 
} 
# menu> Li: hover {
Background - color: # 9 cf; 
} 
# menu> Li> Ul {
position: absolute; 
Min - width: 100%; 
Top: 100%; 
Background - color: # CFF; 
Max - height: 0 px; 
overflow: hidden; 
Opacity: 0; 
The transition: all 600 ms; 
} 
# menu> Li: hover> Ul {
Max - height: 120 px; 
Opacity: 1; 
} 
# menu> Li li: hover {
Background - color: # 99 f; 
} 
</style> 
 
<body> 
 Menu 1 
 
 Submenu 1-1 & lt;/li> 
 Submenu 1-2 & lt;/li> 
 Sub menu 1-3 & lt;/li> 
 Sub menu 1-3 & lt;/li> 
 
 
 The menu 2 
 
 Submenu 2-1 & lt;/li> 
 Sub menu 2-2 & lt;/li> 
 Submenu 2-3 & lt;/li>

CodePudding user response:

Js, CSS can implement, train of thought is set under the dropdown position, and then display: none, mouse slip is hover events, triggering display

CodePudding user response:

Ok, thank you.