@import 'base.less';
@common-bg: #f1f1f1;

.t-menu{
	width: 100%;
	display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -moz-box-pack: justify;
    -ms-flex-pack: justify;
    -webkit-box-align: center;
    -moz-box-align: justify;
    -ms-flex-align: center;
    justify-content: space-between;
	text-align: center;
	background-color: @common-bg;
	border: 1px solid @border-color;
	font-size: 12px;

	&>li{
		position: relative;
	    -webkit-box-flex: 1;
	    -moz-box-flex: 1;
	    -webkit-flex: 1;
	    -ms-flex: 1;
	    flex: 1;

		&+li{
			border-left: 1px solid @border-color;
		}
	}

	&__child{
		display: none;
		position: absolute;
		width: 100%;
		top: -8px;
		-webkit-transform: translate3d(0,-100%,0);
		transform: translate3d(0,-100%,0);
		background-color: @common-bg;
		border: 1px solid @border-color;
		border-radius: 3px;

		&:after{
			position: absolute;
			bottom: -5px;
			left : 50%;
			content : '';
			display: block;
			width: 0;
			height: 0;
			border-top: 5px solid @border-color;
			border-left : 5px solid transparent;
			border-right : 5px solid transparent;
			-webkit-transform : translate3d(-50%, 0, 0);
			transform : translate3d(-50%, 0, 0);
		}

		&>li+li{
			border-top: 1px solid @border-color;
		}
	}

	a{
		display : block;
		line-height: 36px;
		color: @font-color-87;
		cursor: pointer;

		&.current+ul{
			display: block;
		}
	}
}