A Pen by fakhar.

index.html

<div class="menuInner">
<div class="menuheader"></div>
<h1>نام سایت</h1>
<div class="menu">
	<ul>
		<li><a href="#">خانه</a></li>
		<li><a href="#">درباره</a></li>
		<li><a href="#">تماس با ما</a></li>
	</ul>
</div>
</div>

style.css

html {
	direction:rtl;
}
body {
	margin:0;
}
.menuInner {
	background:#FF00FF;
	padding-bottom:20px;
}
.menuheader {
	margin:0;
	display:block;
	padding-top:70px;
	margin-bottom:-50px;
	margin-top:-50px;
	background:#999966;	
}
.menuInner h1 {
	float:right;
	white-space:nowrap;
	width:200px;
	margin:0;
	padding:0;
	margin-left:10px;
	padding-top:50px;
	text-align:center;
	color:#FFFFFF;
}
div.menu {
	display:block;
	height:50px;
	padding:30px 15px 5px 5px;
	margin:0 0px 10px 0;
	background:#999966;	
	border-radius: 0px 0px 80px 0px;
	position:relative;
	z-index:1;
	overflow:hidden;
} 
.menu ul {
	margin:0;
	padding:0;
	display:block;
}
.menu ul li {
	display:inline-block;
	margin:0;
	padding:0;
	position:relative;
	white-space:nowrap;
	height:85px;
}
.menu ul li a {
	display:inline-block;
	margin:0;
	margin-top:10px;
	padding:5px 20px;
	color:#333300;
	text-decoration:none;
	position:relative;
}
.menu ul li:hover {
background:#666633;
}
.menu ul li:hover a {
	color:#F1F1EB;
}

xyBsJ.markdown

xyBsJ

A Pen by fakhar on CodePen.

License.