A Pen by fakhar.

index.html

<div id="page">
<div id="sidebar">
<div class="widget">
<h3>عنوان فهرست</h3>
<div class="widgetBody">
		<ul>
			<li><a href="#">منو </a></li>
			<li><a href="#">منو </a></li>
			<li><a href="#">منو </a></li>
			<li><a href="#">منو </a></li>
			<li><a href="#">منو </a></li>
			<li><a href="#">منو </a></li>
			<li><a href="#">منو </a></li>
			<li><a href="#">منو </a></li>
			<li><a href="#">منو </a></li>
			<li><a href="#">منو </a></li>
			<li><a href="#">منو </a></li>
			<li><a href="#">منو </a></li>
			<li><a href="#">منو </a></li>
			<li><a href="#">منو </a></li>
			<li><a href="#">منو </a></li>
			<li><a href="#">منو </a></li>
			<li><a href="#">منو </a></li>
			<li><a href="#">منو </a></li>
			<li><a href="#">منو </a></li>
			<li><a href="#">منو </a></li>
			<li><a href="#">منو </a></li>
			<li><a href="#">منو </a></li>
			<li><a href="#">منو </a></li>
			<li><a href="#">منو </a></li>
			<li><a href="#">منو </a></li>
			<li><a href="#">منو </a></li>
			<li><a href="#">منو </a></li>
			<li><a href="#">منو </a></li>
			<li><a href="#">منو </a></li>
			<li><a href="#">منو </a></li>
			<li><a href="#">منو </a></li>
			<li><a href="#">منو </a></li>
			<li><a href="#">منو </a></li>
			<li><a href="#">منو </a></li>
			<li><a href="#">منو </a></li>
			<li><a href="#">منو </a></li>
			<li><a href="#">منو </a></li>
			<li><a href="#">منو </a></li>
			<li><a href="#">منو </a></li>
			<li><a href="#">منو </a></li>
			<li><a href="#">منو </a></li>
			<li><a href="#">منو </a></li>
			<li><a href="#">منو </a></li>
			<li><a href="#">منو </a></li>
			<li><a href="#">منو </a></li>
			<li><a href="#">منو </a></li>
			<li><a href="#">منو </a></li>
			<li><a href="#">منو </a></li>
			<li><a href="#">منو </a></li>
			<li><a href="#">منو </a></li>
			<li><a href="#">منو </a></li>
			<li><a href="#">منو </a></li>
			<li><a href="#">منو </a></li>
			<li><a href="#">منو </a></li>
			<li><a href="#">منو </a></li>
			<li><a href="#">منو </a></li>
			<li><a href="#">منو </a></li>
			<li><a href="#">منو </a></li>
			<li><a href="#">منو </a></li>
			<li><a href="#">منو </a></li>
	</ul>
</div>
</div>
</div>
</div>

jCnFs.markdown

jCnFs

A Pen by fakhar on CodePen.

License.

style.css

#page {
	display:block;
	width:100%;
	direction:rtl
}
#sidebar {
	display:inline-block;
	width:250px;;
	margin-left:2%;
	margin-top:25px;
	background:#aaa;
	padding:5px;
}
.widget h3 {
	padding:5px;
	text-align:center;
	background:#333;
	color:#fff;
	margin:0;
}
.widgetBody {
	display:block;
	width:100%;
	height:250px;
	overflow:auto;
	clear:both;
	direction:ltr;	
}
.widgetBody ul {
	list-style:none;
	line-height:175%;
	margin:0;
	padding:0;
	direction:rtl;
	background:#ddd;
}
.widgetBody ul li {
padding:3px 15px 3px 0;
white-space:nowrap;
border-bottom:1px #ccc dashed;
}
.widgetBody ul li:nth-child(odd) {background:#eee;}

.widgetBody a {
color:#333;
text-decoration:none;
}
.widgetBody a:hover {
color:#333;
text-decoration:underline;
}

.clear {
	clear:both;
	display:block;
}