<style type="text/css">

#info {text-align:center;}

.menu {
  height:5em;
  padding:0; 
  margin:5em; 
  list-style-type:none;
  white-space:nowrap;
  }
.menu li {
  float:left;
  min-width:100px;
  }
.menu a {
  position:relative;
  display:block; 
  text-decoration:none; 
  min-width:100px; 
  float:left; 
  }
* html .menu a {
  width:100px;
  }
.menu a span {
  display:block; 
  color:#000; 
  background:#c4c4c4; 
  border:1px solid #fff; 
  border-width:2px 1px; 
  text-align:center; 
  padding:4px 16px; 
  cursor:pointer;
  }
* html .menu a span {
  width:100px; 
  cursor:hand; 
  w\idth:66px;
  }
.menu a b {
  display:block; 
  border-bottom:2px solid #06a;
  }
.menu a em {
  display:none;
  }
.menu a:hover {
  background:#fff;
  }
.menu a:hover span {
  color:#fff; 
  background:#08c;
  }
.menu a:hover em {
  display:block; 
  overflow:hidden; 
  border:6px solid #06a; 
  border-color:#06a #fff; 
  border-width:6px 6px 0 6px; 
  position:absolute; 
  left:50%; 
  margin-left:-6px;
  }


</style>

<ul class="menu">
<li><a href="#nogo"><b><span>الرئيسيـــة</span></b><em></em></a></li>
<li><a href="#nogo"><b><span>الأخبـــار </span></b><em></em></a></li>
<li><a href="#nogo"><b><span>المقــــالات</span></b><em></em></a></li>
<li><a href="#nogo"><b><span>البطاقــــات</span></b><em></em></a></li>
</ul>