قائمة اباجور

HTML

<div class="side-nav">
<ul>
<li><a href="#">الرئيسية</a></li>
<li><a href="#">تعديل 1</a>
<li><a href="#">تعديل2</a></li>
<li><a href="#">تعديل3</a></li>
<li><a href="#">تعديل4</a></li>
<li><a href="#">تعديل5</a></li>
<li><a href="#">تعديل6</a></li>
<li><a href="#">تعديل7</a></li>
</ul>
<div class="clr"></div>
</div>

CSS

<style>
/***** Menu CSS *****/
.side-nav { width: 50%; }
.side-nav ul { -moz-border-radius: 1px; -webkit-border-radius: 1px; border-radius: 1px; list-style: none; margin: 0; padding: 0; overflow: hidden; }
.side-nav ul li { clear: both; display: inline-block; margin: 0; padding: 0; width: 50%; }
.side-nav ul li a { background: #e74c3c; border-right: 1px solid #C0392B; border-left: 1px solid #C0392B; color: #fff; display: block; font-style: italic; padding: 7px 12px; text-align: center; }
.side-nav ul li:nth-child(even) a { background: #c0392b; border-right: 5px solid #E74C3C; border-left: 5px solid #E74C3C; }
.side-nav ul li a:hover, .side-nav ul li:nth-child(even) a:hover { background: #558; }
</style>