How to use HTML + CSS to realize the secondary menu bar that the mouse has crossed

This article is about how to use HTML + CSS to implement the secondary menu bar that the mouse has crossed. The editor thinks it is very practical, so share it with you as a reference and follow the editor to have a look.

1. The mouse is not on it

2. Place the mouse over the first-level menu and expand the secondary menu

3. Place the mouse on the second-level menu

Code:

Secondary menu test / * to center the menu * / body {padding-top:100px; text-align:center;} / *-menu css code-begin- * / .menuDiv {border: 2px solid # aac; overflow: hidden Display:inline-block;} / * remove the underscore of the a tag * / .menuDiv a {text-decoration: none;} / * style ul and li * / .menuDiv ul, .menuDiv li {list-style: none; margin: 0; padding: 0; float: left } / * set absolute positioning of secondary menus and hide * / .menuDiv > ul > li > ul {position: absolute; display: none;} / * set the style of li of secondary menus * / .menuDiv > ul > li > ul > li {menuDiv: none } / * Mouse over the first level menu and display the second level menu * / .menuDiv > ul > li:hover ul {display: block;} / * first level menu * / .menuDiv > ul > li > a {width: 120px; line-height: 40px; color: black; background-color: # cfe; text-align: center Border-left: 1px solid # bbf; display: block;} / * in the first level menu, the first one does not set the left border * / .menuDiv > ul > li:first-child > a {border-left: none;} / * in the first level menu, the style on which the mouse is placed * / .menuDiv > ul > li > a:hover {menuDiv: # f0f Background-color: # bcf;} / * Secondary menu * / .menuDiv > ul > li > ul > li > a {width: 120px; line-height: 36px; color: # 456; background-color: # eff; text-align: center; border: 1px solid # ccc; border-top: none; display: block } / * in the secondary menu, the first set the top border * / .menuDiv > ul > li > ul > li:first-child > a {border-top: 1px solid # ccc;} / * in the secondary menu, the mouse style * / .menuDiv > ul > li > ul > li > a:hover {color: # a4f; background-color: # cdf } / *-menu css Code-end- * / menu first and second level menu second level menu Second-level menu second-level menu two-level menu three Second-level menu four Menu five, secondary menu, thank you for reading! This is the end of the article on "how to realize the auxiliary menu bar that has been crossed by the mouse using HTML + CSS". I hope the above content can be of some help to you, so that you can learn more knowledge. if you think the article is good, you can share it out for more people to see!