سأشرح لكم كيفية اضافة قائمة أفقية جميلة بالشكل التالي:

<style>     

.mbt-red-grey-menu{     

border:5px solid #cd0000;     

padding:0;     

clear:both;     

}

.mbt-red-grey-menu{     

margin:0px;     

padding: 0;     

float: left;     

font: bold 13px Arial;     

width: 100%;     

overflow: hidden;     

margin-bottom: 1em;     

border: 1px solid #625e00;     

border-width: 1px 0;     

background: black url(http://1.bp.blogspot.com/-1c7w5a0macY/ToSxFtLwRAI/AAAAAAAAFLs/I4I4CMYKqKc/s400/blockdefault.gif) center center repeat-x;     

}

.mbt-red-grey-menu li{     

display: inline;     

}

.mbt-red-grey-menu li a{     

float: left;     

color: #fff;     

padding: 9px 11px;     

text-decoration: none;     

border-right: 1px solid white;     

}

.mbt-red-grey-menu li a:visited{     

color: #fff;     

}

.mbt-red-grey-menu li a:hover, .mbt-red-grey-menu li a.selected{     

color: #fff;     

background: transparent url(http://4.bp.blogspot.com/-2GYPQ19l_7w/ToSxFfUYtCI/AAAAAAAAFLk/sdV_PLmGGEA/s400/blockactive.gif) center center repeat-x;     

}

</style>



<ul  class="mbt-red-grey-menu">     

<li><a href="#">Home</a></li>     

<li><a href="#" >About Us </a></li>     

<li><a href="#">Contact Us</a></li>     

<li><a href="#">Sitemap</a></li>     

</ul>