1、导航栏样式

效果图

鼠标移动上到标签上，会呈现如下效果：

制作过程中遇到的问题：a、文字外层 " L "，显示位置不对。可以设置两个h3 位置为绝对位置。b、鼠标移动上去，链接没反应。可能是下层、上层组件遮盖住了。可以设置 z-index: 1;

代码

    h3{
    	text-align: center;
    	width: 8.6rem;
    	height: 2.4rem;
    }
    h3:before{
    	content: '';
    	position: absolute;
    	bottom: 0px;
    	left: 0px;
    	width: 12px;
    	height: 12px;
    	border: 3px solid #c7254e;
    	border-width: 0 0 3px 3px;
    	transition: .5s;
    	opacity: 0;       					 /*设置透明度*/
    }
   h3:hover:before{
    	bottom: -10px;
    	left: -10px;
    	opacity: 1;
    }
    h3:hover:after {
    	top: -10px;
    	right: -10px;
    	opacity: 1;
    }
    h3:after{
    	content: '';
    	position: absolute;
    	top: 0px;
    	right: 0px;
    	width: 12px;
    	height: 12px;
    	border: 3px solid #c7254e;
    	border-width:3px 3px 0 0 ;
    	transition: .5s;
    	opacity: 0;
    }
    h3:hover { 
    	background: #c7254e;
    	color: #fff;
    }
    #myCourse{								/*设置两个h3 标签的位置*/
    	z-index: 1;
    	position: absolute;
    	top: 0;
    	left: 20%;
    	cursor:pointer;
	}
    #todayLesson{
    	position: absolute;
    	top: 0;
    	left: 0;
    	cursor:pointer;
    }