Several methods of implementing the pull-down menu in CSS

PS: Transfer from https://www.cnblogs.com/yewenxiang/p/6064117.html

First type: Display:none and Display:block switch

 1 <! DOCTYPE html> 2 
In the first implementation, you can add a {z-index:1} in UL A to solve the problem of moving the test text down.
This is the first implementation method to be considered, to add Display:none to. drop-down-content when hovering on. Drop-down . The display of Drop-down-content becomes a block, The disadvantage is that you cannot add transition properties and slowly pop down the menu. When the. Drop-down-content is displayed, it squeezes the back box because the . Drop-down-content display is present in the document flow, set Position:relative to. Drop-down. Drop-down-content set the Position:absolute, so that the drop-down menu out of the document flow to resolve, the above comment on the place to be changed    
The second method: set a fixed height for this Li that is suspended, and then set the outside part to be hidden and displayed when hovering.
 1 <style> 2 ul{3 List-style:none 4} 5. nav>li{6 Float:left ; 7} 8 ul a{9 display:block;10 text-decoration:none;11 width:100px; height:50px;13 text-align:center;14 line-height:50px;15 Color:white ; Background-color: #2f3e45;}18 nav>li:first-child a{19 border-radius:10         PX 0 0 10px;20}21 nav>li:last-child a{22 border-radius:0 10px 10px 0;23}24         . drop-down{25/*POSITION:RELATIVE;*/26 height:50px;27 overflow:hidden;28          }29. drop-down-content{30 padding:0;31/*position:absolute;*/32}33 34 h3{35 font-size:30px;36 clear:both;37/* position:relative;38 Z       -index: -1;*/39  }40. drop-down-content li:hover a{41 background-color:red;42}43. Nav. Drop-down:hov er{44 overflow:visible;45}46 </style>
One problem: The text in the H3 paragraph is drawn from the drop-down menu, and the drop-down menu retracts when the mouse is over the word.
There are two ways to solve this: 1. Set position:relative for. Drop-down,. Drop-down-content set Position:absolute. 
2. Set position:relative;z-index:-1 for H3.
The third method: To set a fixed height to the drop-down menu, the content of the drop-down menu is set to Transparent opacity:0, and opacity:1 when the drop-down menu is suspended;
 1 <style> 2 ul{3 list-style:none; 4} 5. nav>li{6 float: Left 7} 8 ul a{9 display:block;10 text-decoration:none;11 width:100px; height:50px;13 text-align:center;14 line-height:50px;15 Color:white ; Background-color: #2f3e45;}18 nav>li:first-child a{19 border-radius:10         PX 0 0 10px;20}21 nav>li:last-child a{22 border-radius:0 10px 10px 0;23}24 . drop-down{25/*position:relative;*/26 height:50px;27}28. drop-down-content         {padding:0;30 opacity:0;31/*position:absolute;*/32}33 34 h3{35 font-size:30px;36 clear:both;37/* position:relative;38 Z-index         : -1;*/39}40. drop-down-content li:hover a{41 background-color:red;42}43. Nav. drop-down:hover . drop-down-content{44 opacity:1;45}46 </style>
The effect is as above.
The above several methods can not add the transition effect, the mouse over the pull menu immediately pop out, the user experience is not very good, the following method may add the transition effect to achieve a certain time to pop up method four: The drop-down menu of the UL height is set to 0, and beyond the partial hidden.
 1 <style> 2 ul{3 list-style:none; 4} 5. nav>li{6 float: Left 7} 8 ul a{9 display:block;10 text-decoration:none;11 width:100px; height:50px;13 text-align:center;14 line-height:50px;15 Color:white ; Background-color: #2f3e45;}18 nav>li:first-child a{19 border-radius:10         PX 0 0 10px;20}21 nav>li:last-child a{22 border-radius:0 10px 10px 0;23}24 . drop-down{25/*position:relative;*/26 height:50px;27}28. drop-down-content             {padding:0;30 opacity:0.3;31 height:0;32 overflow:hidden;33 Transition:all 1s ease;34/*position:absolute;*/35}36 notoginseng h3{38 fon   t-size:30px;39          CLEAR:BOTH;40/* position:relative;41 z-index: -1;*/42}43. drop-down-c             Ontent li:hover a{44 background-color:red;45}46. Nav. Drop-down:hover. drop-down-content{47 Opacity:1;48 height:150px;49}
There will also be the same problem, the two solutions, the above code in the annotated place to be changed.
Do this demo when I encountered a misunderstanding, thought that the drop-down menu ul value set to 0, the drop-down menu overall will be hidden, in fact, the height of the UL changed to 0, but the contents of the content has not changed, I feel that with the navigation when the height of the floating Li,ul become 0,li can also show the same. Be sure to set Overflow:hidden for UL, the entire drop-down menu will be hidden. Incidentally, we do the navigation bar is generally left floating li tag, the height of the UL becomes 0, and then to the UL set Overflow:hidden,ul will have a height, wrapped the li tag, the back of the box will be normal layout.
Method Five: Set the LI element of the package drop-down menu position:relation, the drop-down menu absolute positioning, left:-999px; Make the drop-down menu run to the left of the browser outside the invisible place, hover, left:0; make it appear in the browser.
 1 <style> 2 ul{3 list-style:none; 4} 5. nav>li{6 float: Left 7} 8 ul a{9 display:block;10 text-decoration:none;11 width:100px; height:50px;13 text-align:center;14 line-height:50px;15 Color:white ; Background-color: #2f3e45;}18 nav>li:first-child a{19 border-radius:10         PX 0 0 10px;20}21 nav>li:last-child a{22 border-radius:0 10px 10px 0;23}24             . drop-down{25 position:relative;26}27. drop-down-content{28 padding:0;29             Position:absolute;30 left: -999px;31}32 h3{33 font-size:30px;34          Clear:both;35}36. drop-down-content li:hover a{37 background-color:red;38}39 . Nav. DroP-down:hover. drop-down-content{40 left:0;41}42 </style> 
Several methods of implementing the pull-down menu in CSS