自定义组件--nav菜单

做这个东西的出发点很简单，就是把做过的东西，封装起来，写个博客，记录一下，以后项目需要用就可以直接拿来用，做法很简单，不喜欢的勿喷，觉得有用的可以拿去试试。

直接上代码

html部分：

<div class="ul">    <ul>        <li><a href="javascript:void(0)">首页</a></li>        <li><a href="javascript:void(0)">产品中心</a></li>        <li><a href="javascript:void(0)">服务中心</a></li>        <li><a href="javascript:void(0)">联系我们</a></li>        <li><a href="javascript:void(0)">集团信息</a></li>    </ul></div>

css样式部分：

.ul{            width: 700px;            height: 80px;            margin:20px auto;            border-top:1px solid red;            border-bottom:1px solid red;        }        .ul ul{            width: 100%;            height: 100%;        }        .ul ul li{            width: 18%;            height: 80px;            float: left;            list-style: none;            padding: 0 1%;        }        .ul ul li a{            display: block;            height: 100%;            color: #333;            text-align: center;            line-height: 80px;            text-decoration: none;            position: relative;        }        .ul ul li a:before{            content: "";            width: 0;            height: 0;            border-right: 40px solid transparent;            border-left: 40px solid transparent;            border-bottom: 12px solid red;            position: absolute;            left: 18%;            bottom: 0;            opacity: 0;        }        .ul ul li a:after{            content: "";            width: 0;            height: 0;            border-right: 40px solid transparent;            border-left: 40px solid transparent;            border-top: 12px solid red;            position: absolute;            left: 18%;            top: 0;            opacity: 0;        }        .ul ul li:hover a:before{            opacity: 1;        }        .ul ul li:hover a:after{            opacity: 1;        }

效果图：

默认状态：

选中状态：

到此结束，简单粗暴，通俗易懂！