How to make the secondary menu of the location of the sub menu fixed-CodePudding

Recently in the realization of functions of a navigation, first-level menu, the secondary menu, select the secondary menu, the realization of the function of the corresponding submenu appears, but how to make a submenu (red box mark) is always displayed in the position near the top of the position (red line), rather than move, if there will be someone, please help solve, thank you,
The effect is like this:

Code is as follows:

 
 
 
 
<meta charset="UTF-8"> 
  
<style> 
* {
padding:0; 
margin:0; 
} 
A {
color: blue; 
text-decoration: none; 
} 
The box {
width:100%; 
margin: 0 auto; 
/* background - color: grey; */
} 
The nav {
Width: 1200 px; 
Height: 100 px; 
/* background: greenyellow; */
margin: 0 auto; 
} 
. Wrap,. Subnav. Z_nav {
The list - style: none; 
} 
. Wrap> Li {
float: left; 
Margin - left: 2 px; 
height: 30px; 
width: 100px; 
text-align: center; 
Height:; 
Background - color: grey. 
} 
. All {
display: inline-block; 
height: 30px; 
} 
The subnav {

} 
. Subnav> Li {
Position: relative; 
text-align: left; 
Background - color: gainsboro; 
} 
. Subnav> Li. Z_nav {
Width: 400 px; 
position: absolute; 
Left: 100 px; 
top:0px; 
Background - color: yellowgreen; 
Display: none; 
} 
. Subnav> Li: hover> . Z_nav {
Display: block; 
} 
</style> 
 
<body>

CodePudding user response:

Have a try,

 postition: fixed

CodePudding user response:

Let me have a try, thanks!

CodePudding user response:

Change the relative positioning to ul on

 
The subnav {
Position: relative; 
} 
. Subnav> Li {
text-align: left; 
Background - color: gainsboro; 
}

CodePudding user response:

https://blog.csdn.net/qq_22154647/article/details/103837342

CodePudding user response:

Location, location write dead