This article introduces examples of the second -level menu bar that uses HTML+CSS to implement the mouse. Share it with everyone, as follows:
First of the effect drawing:
1. The mouse is not above
2. Put the mouse on the first -level menu and expand the secondary menu
3. Put the mouse on the secondary menu
Code:
<HTML> <Head> <Title> Second-level menu test </Title> <meta charset = UTF-8> <Style Type = Text/CSS>/*In order to make the menu in the middle*/body {padding-top: 100px; text -rign: center;} / * ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ * / .menudiv { Border: 2px solid #aac; overflow: hidden; display: inline-black;} /* Remove the downline of A tags* / .menudiv a {text-decics: none;} /* Set UL and li style* / .Men udiv UL, .menudiv Li {list-style: none; margin: 0; padding: 0; float: left;} /* Set the second-level menu absolute positioning, and hide* / .menudiv> ul> ul {position: absolutee ; Display: None;} /* Set the style of li of the second -level menu* /.menudiv> li> ul> li {float: none;} /* Mouse placed on the first -level menu, displaying the secondary menu* / .menudiv> UL> Li: Hover Ul {Display: BLOCK;} /* 1-level menu* / .menudiv> li> a {width: 120px; line-height: 40px; color: black; Or: # CFE; Text-Align: Center; Border-heft: 1px solid #bbf; display: block;} /* In the first-level menu, the first left box* / .menudiv> li: first-child> a {border-hered: none;} /* In the first-class menu, the style of the mouse placed* /.menudiv> Ul> li> A: Hover {color: #f0f; background-color: #bcf;} /* Second-level menu*/ .menudiv> Ul> Li> Ul> Li> A {width: 120px; line-height: 36px; color: #456; background-color: #eff; text-align: center: 1px solid ID #CCC; Border-Top: None; Display: Block;} /* In the secondary menu, the first setting of the top bezel* / .menudiv> li> li: first-child> a {border-top : 1px solid #ccc;} /* In the secondary menu, the style of the mouse is placed* / .menudiv> Ul> li> li> A: Hover {color: #a4f; background-color: #cdf;} / * ---------------- Menu CSS code --------- End ------------------------------------------------------------------------------------------------------- BODY> <! --------- Menu HTML code -------------------------> <div class = menudiv> <ul> <li> <a href =#> Menu One </a> <ul> <li> <A href =#> Two -level menu </a> </li> <a href =#> secondary menu </a> < /li> <li> <A href =#> Second -level menu </a> </li> </ul> </li> <li> <a href =#> Menu two </a> <ul> < li> <A href =#> Second -level menu </a> </li> <li> <A href =#> Two -level menu </a> </li> </li> <li> <li> <A href =#> menu three </a> <ul> <li> <a href =#> secondary menu </a> </li> <a href =#> secondary menu </a ></li> <li><a href=#>二级菜单</a></li> <li><a href=#>二级菜单</a></li> <li><a href=#>二级菜单</a></li> </ul> </li> <li> <a href=#>菜单四</a> </li> <li> <a href=# >菜单五</a> <ul> <li><a href=#>二级菜单</a></li> <li><a href=#>二级菜单</a></li> <li><a href=#>二级菜单</a></li> </ul> </li> </ul> </div> <!-- -------菜单html代码---------end------- --> </body></html>The above is all the contents of this article. I hope it will be helpful to everyone's learning. I also hope that everyone will support VEVB Wulin.com.