The final effect is as follows:
Next, I will explain the production process step by step from the two parts of html and css
Table of contents
Insert an external style sheet to prepare for the next css editing
Realization of interactive effects
Realize the visual interaction when the mouse moves to the sub-bar
Html implements the layout
create parent column
<body>
<ul id="ulfather"><!--创建父列-->
<li class="lifather">
<h4>栏目一</h4>
</li>
<li class="lifather">
<h4>栏目二</h4>
</li>
<li class="lifather">
<h4>栏目三</h4>
</li>
<li class="lifather">
<h4>栏目四</h4>
</li>
<li class="lifather">
<h4>栏目五</h4>
</li>
</ul>
</body>
create subsection
Because there are five parent columns, I plan to set up three sub-columns for each parent column; it would be too lengthy to post the codes of all five columns. The following only shows the code for creating a sub-column in "Column 1"
<li class="lifather">
<h4>栏目一</h4>
<ul class="ulson"><!--创建子列-->
<li class="lison">子栏</li>
<li class="lison">子栏</li>
<li class="lison">子栏</li>
</ul>
</li>
Insert an external style sheet to prepare for the next css editing
I won’t release the code for this step, because everyone stores css files in different locations. If you don’t know how to insert a style sheet from the outside, you can refer to the following methods:
<head>
<link rel="stylesheet" href="外部样式表的位置">
</head>Css implementation style
Arrange text, set background
*{
margin: 0;/*清除外边距*/
padding: 0;/*清除内边距*/
list-style: none;/*删除<li>标签生成的点*/
}
body{
background-image: url('https://static.runoob.com/images/mix/gradient2.png');/*插入背景图片*/
background-repeat: repeat-x;/*让背景图仅在x轴重复*/
display: flex;/*设置为弹性盒*/
justify-content: center;/*导航栏居中*/
}
#ulfather{
display: flex;/*设置为弹性盒*/
background-color: rgb(40, 44, 100);/*设置栏目背景为深紫色*/
box-shadow: 2px 5px 15px rgba(0, 0, 0, .7);/*阴影效果*/
border-radius: 5px;/*圆角效果*/
width: 350px;/*导航栏宽度*/
height: 30px;/*导航栏长度*/
line-height: 30px;/*文字垂直居中*/
}
.lifather{
width: 70px;/*每个栏目占宽70像素，把350像素的导航栏5等分*/
text-align: center;/*文字水平居中*/
color: rgb(160, 160, 230);/*设置字体颜色为浅紫色*/
}
.ulson{
background-color: rgb(100, 100, 100, .5);/*设置子栏背景为半透明灰色*/
border-radius: 0px 0px 5px 5px;/*圆角效果*/
color: rgb(250, 250, 250);/*设置字体颜色为白色*/
}
Realization of interactive effects
Hide and display sub-columns
Hidden: Add a line of code to .ulson
.ulson{
background-color: rgb(100, 100, 100, .5);/*设置子栏背景为半透明灰色*/
border-radius: 0px 0px 5px 5px;/*圆角效果*/
color: rgb(250, 250, 250);/*设置字体颜色为白色*/
display: none;/*初始状态为隐藏*/
}Display: When the mouse moves over the column, the corresponding sub-column is displayed
.lifather:hover .ulson{
display: block;
} 
Realize the visual interaction when the mouse moves to the sub-bar
When the mouse points to a sub-column, the color of the sub-column becomes darker
.lison:hover{
background-color: rgba(0, 0, 0, .3);
}
Summarize
The above is the process of using html and css to realize the navigation bar at the top of the page. In actual use, modify the text appropriately and insert a link to realize the complete function.
