php 170915【CSSのみで実装】言语切替

Posted 2021-05-05

.box_menu {
	margin: 0 auto;
	text-align: right;
	position: absolute;
	top: 0;
	right: 0;
	color: #fff;
	z-index: 999;
	@include fsz(13);
	.menu {
		margin: 0;
		padding: 0;
		.tit {
			background: #1b1b1b;
			position: relative;
			display: inline-block;
			cursor: pointer;
			transition: all 0.2s ease;
			text-align: center;
			i {
				margin-left: 5px;
			}
		}
		li {
			list-style: none;
			width: 120px;
			background: #aaa;
			a {
				display: table;
				margin-top: 1px;
				padding: 8px 10px;
				width: 100%;
				text-decoration: none;
				text-align: left;
				overflow: hidden;
			}
			ul {
				margin: 0;
				padding: 0;
				background: #aaa;
			}
			li a {
				display: block;
				margin-top: 0;
				padding: 0 10px;
				height: 0;
				background: #fff;
				color: $c_base;
				font-family: $f_min;
				&:hover {
					background: #ccc;
				}
			}
		}
		> li:hover li a {
			display: table;
			margin-top: 1px;
			padding: 8px 10px;
			width: 100%;
		}
		* {
			-moz-transition: .5s;
			-webkit-transition: .5s;
			-o-transition: .5s;
			-ms-transition: .5s;
			transition: .5s;
		}
	}
}

<div class="box_menu">
	<ul class="menu">
		<li class="tit">Language<i class="fa fa-angle-down"></i>
			<ul>
				<li><a href="#77777" target="_blank">English</a></li>
				<li><a href="#77777" target="_blank">繁体中文</a></li>
				<li><a href="#77777" target="_blank">簡体中文</a></li>
				<li><a href="#77777" target="_blank">한국어</a></li>
				<li><a href="#77777" target="_blank">ไทย</a></li>
			</ul>
		</li>
	</ul>
</div>