HTML+CSS制作的导航条

HTML+CSS制作的导航条[代码来自YouTube @Online Tutorials]

代码由YouTube上的Online Tutorials提供

先展示一下效果图

鼠标未悬停效果：
鼠标悬停效果：

源代码

• head.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
    //↓引入css样式
<link rel="stylesheet" type="text/css" href="../css/HeadStyle.css">
<div class="head-contain">
		<ul>
			<li>
				<a href="Show_lu.jsp">鲁</a>
			</li>
			<li>
				<a href="Chuan.jsp">川</a>
			</li>
			<li>
				<a href="Yue.jsp">粤</a>
			</li>
			<li>
				<a href="Su.jsp">苏</a>
			</li>
			<li>
				<a href="Min.jsp">闽</a>
			</li>
			<li>
				<a href="Zhe.jsp">浙</a>
			</li>
			<li>
				<a href="Xiang.jsp">湘</a>
			</li>
			<li>
				<a href="Show_hui.jsp">徽</a>
			</li>
		</ul>
		
</div>

• HeadStyle.css

@charset "UTF-8";

.head-contain{
    margin: 0;
    padding: 0;
    font-family: sans-serif;
}
.head-contain ul{
    position: absolute;
    top: 8%;
    left: 50%;
    transform: translate(-50%,-50%);
    display: flex;
    margin: 0;
    padding: 0;
}
.head-contain ul li{
    list-style: none;
}
.head-contain ul li a{
    position: relative;
    display: block;
    text-align: center;
    margin: 0 25px;
    color: #262626;
    font-size: 38px;
    text-decoration: none;
    transition: .5s;
    padding: 5px 10px;
}
.head-contain ul li a:before{
    content: '';
    position: absolute;
    bottom: 12px;
    left: 12px;
    width: 12px;
    height: 12px;
    border: 3px solid #ff6700;
    border-width: 0 0 3px 3px;
    transition: .5s;
    opacity: 0;
}
.head-contain ul li a:hover:before{
    bottom: -8px;
    left: -8px;
    opacity: 1;
}
.head-contain ul li a:after{
    content: '';
    position: absolute;
    top: 12px;
    right: 12px;
    width: 12px;
    height: 12px;
    border: 3px solid #ff6700;
    border-width: 3px 3px 0 0;
    transition: .5s;
    opacity: 0;
}
.head-contain ul li a:hover:after{
    top: -8px;
    right: -8px;
    opacity: 1;
}

• 视频链接（up主非本人）
  『导航栏』简洁大方带特效的导航栏