Secondary Navigation bar production:
1. The removal of a navigation bar pattern list (list-style: none), and given floating, so that the transverse arrangement (float: left)
2. Add to each one <a> </a> label li, to a set pattern, making block-level elements (display: block), so that only one click li current range of the region to trigger a jump
3. to add li two required navigation bar which added ul> li, to a class name, set its style to (display: none), so hidden in ordinary circumstances
4. Set a navigation bar across the effect, when the slide has two navigation bar li, provided two navigation bar state (display: block), the display state is the
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <!-- <link rel="stylesheet" href="./../common/common.css"> --> <title>Document</title> <style> *{ margin: 0; padding: 0; } ul,li{ list-style: none; } .one{ width: 600px; background-color: coral; height: 30px; margin: 0 auto; } .one li{ float: left; width: 100px; text-align: center; line-height: 30px; } .one li:hover{ background-color: #fff; color: coral; } .one .two{ display: none; } .one li:hover .two{ display: block; } .one .two li{ background-color: cadetblue; } .one .two li:hover{ background-color: honeydew; } a{ display: block; text-decoration: none; } </style> </head> <body> <ul class="one"> <li><a href="">一级</a> </li> <li><a href="">一级</a> </li> <li><a href="">一级</a> <ul class="two"> <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> </li> <li><a href="">一级</a> </li> </ul> </body> </html>