Home > Article > Web Front-end > How to implement secondary tab in html
How to implement secondary tab in html
- coldplay.xixiOriginal
- 2021-02-20 11:09:285876browse
html method to implement secondary tab: first open the software that writes web page code, and create a new html web page file, write html code in the body; then write in the [
The operating environment of this tutorial: windows7 system, html5 version, DELL G3 computer. This method is suitable for all brands of computers.
html Method to implement secondary tab:
1. Open the software that writes web page code, and create a new html web page file, and write the html code in the body :
<body> <div class="a"> <ul> <li> <a href="#">一级</a> <ul class="d"> <li><a href="#">二级</a></li> <li><a href="#">二级</a></li> </ul> </li> </ul> </div> </body>
2. Write the css code in <style></style>:
<style type="text/css">
.a ul li ul{
display: none;/*将 二级 菜单隐藏起来*/
}
.a ul li:hover ul{
display: block;/*当鼠标移动到一级标签后，ul即二级菜单显示出来*/
}
</style>3. After saving and running, as shown in the figure, when the mouse is placed After the previous level menu is displayed, the second level is displayed. Complete all steps
Related learning recommendations:html video tutorial
The above is the detailed content of How to implement secondary tab in html. For more information, please follow other related articles on the PHP Chinese website!