Tryit Editor - Free-Learn

<!DOCTYPE html>
<html>
<head>
<style>

body{
 margin:0;
}

ul.MyMenu{
 padding:0;
 margin:0;
 list-style-type:none;
 overflow: hidden;
 background-color:#333333;
 position: fixed;
 top: 0;
 width: 100%;
 z-index: 10;
}

ul.MyMenu li{
 float:right;
}

ul.MyMenu li a{
 display:block;
 text-decoration:none;
 padding:10px 15px;
 color:#fff;
}

ul.MyMenu li a:hover{
 background-color:#d51c00;
}

.MyContent{
 padding: 30px 10px;
 text-align: center;
}

.MyImg{
 position:relative;
 z-index: 1;
}

</style>
</head>
<body dir="rtl">

<ul class="MyMenu">
 <li><a href="#">خانه</a></li>
 <li><a href="#">آموزش HTML</a></li>
 <li><a href="#">آموزش CSS</a></li>
</ul>

<div class="MyContent">
 <h2>به سمت پایین اسکرول کنید</h2>
 <p>سایت آموزشی فری لرن</p>
 <p>سایت آموزشی فری لرن</p>
 <p>سایت آموزشی فری لرن</p>
 <p>سایت آموزشی فری لرن</p>
 <img src="files/girls-2.png" class="MyImg">
 <p>سایت آموزشی فری لرن</p>
 <p>سایت آموزشی فری لرن</p>
 <p>سایت آموزشی فری لرن</p>
 <p>سایت آموزشی فری لرن</p>
 <p>سایت آموزشی فری لرن</p>
 <p>سایت آموزشی فری لرن</p>
 <p>سایت آموزشی فری لرن</p>
 <p>سایت آموزشی فری لرن</p>
 <p>سایت آموزشی فری لرن</p>
 <p>سایت آموزشی فری لرن</p>
</div>

</body>
</html>