3 Kinds of pure CSS method control element hidden display

1. Through hover, It is also the most common way. This method requires that the button must have a hierarchical relationship with the controlled Element. (compatible with low-end browsers Often)

    <Divclass= "nav-btn">        <H2>Button</H2>        <ulclass= "nav-box">            <Li><ahref="#">Menu 1</a></Li>            <Li><ahref="#">Menu 2</a></Li>            <Li><ahref="#">Menu 3</a></Li>        </ul>    </Div>

        *{padding:0;margin:0; }Ul,li{List-style:None; }. Nav-btn{position:relative; }. NAV-BTN H2{Height:60px;Line-height:60px;width:130px;text-align:Center;background:#ff0; }. Nav-box{position:Absolute;Top:60px; left:0px;Display:None; }. Nav-btn:hover. Nav-box{Display:Block; }

2. By: Focus click on the button to display, click on the Blank Space Hidden. This side-pass also requires a hierarchical relationship between the button and the controlled Element. (needs to CSS3 Selector)

    <Divclass= "nav-btn">        <Button>Button</Button>        <ulclass= "nav-box">            <Li><ahref="#">Menu 1</a></Li>            <Li><ahref="#">Menu 2</a></Li>            <Li><ahref="#">Menu 3</a></Li>        </ul>    </Div>

        *{padding:0;margin:0; }Ul,li{List-style:None; }. Nav-btn{position:relative; }. NAV-BTN H2{Height:60px;Line-height:60px;width:130px;text-align:Center;background:#ff0; }. Nav-box{position:Absolute;Top:60px; left:0px;Display:None; }. nav-btn button:focus ~. Nav-box{Display:Block; }

3. Using the Label's for property binding checkbox, This method has no restriction on the hierarchy of buttons and boxes (required to CSS3 Selector)

    <label for= "control"class= "nav-btn">Menu</label>    <Div>        <inputtype= "checkbox"name=""ID= "control"class= "nav-con">        <ulclass= "nav-box">            <Li><ahref="#">Home</a></Li>            <Li><ahref="#">Contact Us</a></Li>            <Li><ahref="#">Products</a></Li>            <Li><ahref="#">News</a></Li>        </ul>    </Div>

Ul,li{List-style:None; }        *{padding:0;margin:0; }. Nav-con{Display:None; }. Nav-box{Display:None; }. nav-con:checked ~. Nav-box{Display:Block; }. Nav-btn{padding:10px 15px;background:; }

3 Kinds of pure CSS method control element hidden display