自定义组件--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;
        }

效果图：

默认状态：

选中状态：

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