First write the HTML file, write the navigation bar you want to make, for example:
<html>
<head>
<title>Secondary navigation bar</title>
</head>
<body>
<div class="sty">
<ul>
<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>
<li><a href="#">web前端</a>
<ul>
<li><a href="#">html5</a></li>
<li><a href="#">css</a></li>
<li><a href="#">JavaScript</a></li>
</ul>
</li>
<li><a href="#">网络营销</a></li>
<li><a href="#">新闻资讯</a></li>
</ul>
</div>
</body>
</html>
You can write nested second-level tags in the first-level tags, so that a second-level navigation bar is basically determined, you only need to add styles,
then write a css file and set the style
*{
margin: 0;
padding: 0;
}
/*CSS global settings*/
*{
margin:0;
padding:0;
}
.are not{
background-color:#4a4a4a;
height:40px;
width:450px;
margin:0 auto;
}
/* Horizontal menu style settings */
ul {
list-style:none;
}
ul li{
float:left;
line-height:40px;
text-align:center;
position:relative;
}
a{
text-decoration:none;
color:white;
display:block;/*Convert an inline element to a block-level element*/
width:90px;
height:40px;
}
a:hover{
background-color:#666666;
color:#FFFFFF;
}
/* Secondary drop-down menu style settings */
ul li ul{
position:absolute;
top:40px;
left:0px;
display:none;/*Hide by default or when the mouse leaves*/
width:90px;
}
ul li ul li{
float:none;
background-color:#EEEEEE;
}
ul li ul li a:link,ul li ul li a:visited{
background-color:#4a4a4a;
}
ul li ul li a: hover {
background-color:#009933;
}
/*Show the drop-down menu when the mouse rolls over the elements of the first-level menu*/
ul li:hover ul{
display:block;
}
The effect diagram is as follows: