CSS style display and positioning

   display
    display: block; block element display  
    display: inline; inline element display 
    display: inline-block; block element display in line 
    display: flexbox; flexible box When the total width of the elements is less than the sum of the elements, the width is evenly distributed
    display: none; hide
Positioning

position: static By default, there is no positioning,

position: fixed absolute positioning, relative to the browser. Common such as back to the top and the floating bar on both sides does not occupy space directly at the top, will block the bottom can not use top

position: elative relative positioning, relative normal position Use top to adjust from where it should be

position: absolute positioning, relative positioning of the parent element is not static

.aoa{
    position:absolute;
    border:  red 1px solid;
    background-color: blue;
    top:40px;
    display: none;
}
{.qaq
    position: relative;
    height: 40px;
    line-height: 40px;
}
.qaq:hover .aoa{
    display: block;
}
<ul>
        <li class="qaq"> 十几万
            <div class="aoa"> 
                <ul>
                    <li>123</li>
                    <li>456</li>
                </ul>
            </div>
        </li>
    </ul>
Simple code to hide the drop-down menu bar

Guess you like

Origin www.cnblogs.com/marswenze/p/12727756.html