Need help for educational purpose

HTML-CSS
#1 
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-32">
	<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css" integrity="sha384-UHRtZLI+pbxtHCWp1t77Bi1L4ZtiqrqD80Kn4Z8NTSRyMA2Fd33n5dQ8lWUE00s/" crossorigin="anonymous">
	<link href="https://fonts.googleapis.com/css?family=Indie+Flower" rel="stylesheet">
	<title>Well testing CSS stuff</title>
</head>
<body>
	<style type="text/css">
		*{
			margin: 0;
			padding: 0;
			font-family: 'Indie Flower', cursive;
			list-style: none;
			text-decoration: none;
		}
		.Middle{
			position:  absolute;
			top: 30%;
			right: : 0%;
			transform: translate(50%, 50%);
		}
		.menu{
			width: 800px;
			border-radius: 8px;
			overflow: hidden;
		}
		.item{
			border-top: 1px solid #2980b9;
			overflow: hidden;		
		}
		.btn{
			display: block;
			padding: 16px 20px;
			background: #3498db;
			color: white;
			position: relative;
		}
		.btn:before{
			content: "";
			position: absolute;
			width: 14px;
			height: 14px;
			background: #3498db;
			left: 20px;
			bottom: -7px;
			transform: rotate(45deg);
		}
		.btn i{
			margin-right: 10px;

		}
		.smenu{
			background: #333;
			overflow: hidden;
			transition: max-height:0.3s;
			max-height: 0;
		}
		.smenu a{
			display: block;
			padding: 16px 26px;
			color: white;
			font-size: 14px;
			position: relative;
		}
		.smenu a:before{
			content: "";
			position: absolute;
			width: 6px;
			height: 100%;
			background: #3498db;
			left: 0;
			top: 0;
			transform: 0.3s;
			opacity: 0;
		}
		.smenu a:hover:before{
			opacity: 1;
		}
		.item:target . smenu{
			max-height: 10em;
		}
	</style>
	<!-- CSS PART -->
	<div class="Middle" >
		<div class="Menu">
			<li class="item" id='Profile'>
				<a href="#Profile" class="btn"><i class="far fa-user"></i>profile</a>
				<div class="smenu">
					<a href="#"> Posts</a>
					<a href="#">Picture</a>
				</div>
			</li>
			<li class="item" id='Message'>
				<a href="#Message" class="btn"><i class="fas fa-envelope"></i>Message</a>
				<div class="smenu">
					<a href="#"> New</a>
					<a href="#">Sent</a>
					<a href="#">Spam</a>
				</div>
			</li>
			<li class="item" id='Setting'>
				<a href="#Setting" class="btn"><i class="fas fa-cogs"></i>Setting</a>
				<div class="smenu">
					<a href="#"> Password</a>
					<a href="#">Language</a>
				</div>
			</li>
			<li class="item">
				<a class="btn" href=""><i class="fas fa-sign-out-alt"></i>Logout</a>
			</li>
		</div>
	</div>
</body>
</html>

Untitled
Untitled1600×900 80.3 KB

Hello It’s me again
As you can see in the code mostly copied for study
but why it’s display so weird ( top 50% and right 50%)
and the accordion menu not working properly when i pressed it’s nothing appear
help me and thank you deeply

#2
  1. Because of this CSS
.Middle{
  position:  absolute;
  top: 30%;
  /* this is broken as well */
  right: : 0%;
 /* should be  */
  right: 0%;
/* this seems wrong but i don't know what the intended placement is */
  transform: translate(50%, 50%);
}
  1. Because of errors in the CSS.

Here is a working version (i changed a few things).

1 Like
#3

thank you for pointing out
however, this is a copy-pasted code i still figure out how it’s work yet ( just see how it’s appeared )
however thank you very much

#4