مشاهده و تمرین روی کد ها

<!DOCTYPE html>
<html>
<head>
<style>
body {
    margin: 0;
}

ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    width: 25%;
    background-color: #f1f1f1;
    position: fixed;
    height: 100%;
    overflow: auto;
}

li a {
    display: block;
    color: #000;
    padding: 8px 16px;
    text-decoration: none;
}

li a.active {
    background-color: #4CAF50;
    color: white;
}

li a:hover:not(.active) {
    background-color: #555;
    color: white;
}
h2,h3,p,ul {direction:rtl;}

</style>
</head>
<body>

<ul>
  <li><a class="active" href="#home">خانه</a></li>
  <li><a href="#news">اخبار</a></li>
  <li><a href="#contact">ارتباط با ما</a></li>
  <li><a href="#about">درباره ما</a></li>
</ul>

<div style="margin-left:25%;padding:1px 16px;height:1000px;">
  <h2>منو با محل ثابت و ارتفاع کامل</h2>
  <h3>این قسمت را اسکرول کنید تا نحوه ثابت ماندن منو را ببینید</h3>
  <p>توجه داشته باشید که این عنصر div مقدار 25%margin چپ دارد.این به این دلیل است که منوی کناری دارای عرض 25 درصدی است.اگر margin را حذف کنید منوی کناری  بر روی اسن عنصر div قرار می گیرد.</p>
  <p>همچنین برای منوی کناری overflow:autoنیز تعریف کرده ایم . این کار برای زمانی است که منو طولانی باشد (مثلا 50 لینک) تا در صورت نیاز یک نوار اسکرول برای درسترسی به لینک ها افزوده شود.</p>
  
  <p>مقداری متن تزئینی...</p>
  <p>مقداری متن تزئینی...</p>
  <p>مقداری متن تزئینی...</p>
  <p>مقداری متن تزئینی...</p>
  <p>مقداری متن تزئینی...</p>
  <p>مقداری متن تزئینی...</p>
  <p>مقداری متن تزئینی...</p>

</div>

</body>
</html>