كود نافبار جميل

صورة النافبار


يحتاج الى وضع كودين

الكود الاول ويوضع فى التشكيلات العامة

الكود:

[table align="center" border="0" cellpadding="0" cellspacing="1" width="90%"][tr][td]
[/td][/tr][tr][td class="code"]
<div class="menu">
   <ul>
      <li><a href="#" >Home</a></li>
      <li><a href="#" id="current">Fruit</a>
         <ul>
            <li><a href="#">Apples</a></li>
            <li><a href="#">Oranges</a></li>
            <li><a href="#">Bananas</a></li>
            <li><a href="#">Pears</a></li>
         </ul>
      </li>
      <li><a href="/about.html">About</a>
         <ul>
            <li><a href="#">Company Info</a></li>
            <li><a href="#">Locations</a></li>
            <li><a href="#">FAQ</a></li>
         </ul>
      </li>
      <li><a href="/contact/contact.php">Contact Us</a></li>
   </ul>
</div>[/td][/tr][/table]

والكود الثانى يوضع فى ورقة ccs

الكود:

.menu{
   border:none;
   border:0px;
   margin:0px;
   padding:0px;
 
  font: 67.5% "Lucida Sans Unicode", "Bitstream Vera Sans", "Trebuchet
Unicode MS", "Lucida Grande", Verdana, Helvetica, sans-serif;
   font-size:14px;
   font-weight:bold;
   }
.menu ul{
   background:#F93;
   height:50px;
   list-style:none;
   margin:0;
   padding:0;
   -webkit-border-radius: 15px;
   -moz-border-radius: 15px;
   border-radius: 15px;
   -webkit-box-shadow: inset 0px 16px 0px 0px rgba(255, 255, 255, .1);
   -moz-box-shadow: inset 0px 16px 0px 0px rgba(255, 255, 255, .1);
   box-shadow: inset 0px 16px 0px 0px rgba(255, 255, 255, .1);
   }
   .menu li{
      float:left;
      padding:0px 0px 0px 15px;
      }
   .menu li a{
      color:#000;
      display:block;
      font-weight:normal;
      line-height:50px;
      margin:0px;
      padding:0px 25px;
      text-align:center;
      text-decoration:none;
      }
   .menu li a:hover{
      background:#C60;
      color:#FFFFFF;
      text-decoration:none;
      -webkit-box-shadow: inset 0px 0px 7px 2px rgba(0, 0, 0, .3);
      -moz-box-shadow: inset 0px 0px 7px 2px rgba(0, 0, 0, .3);
      box-shadow: inset 0px 0px 7px 2px rgba(0, 0, 0, .3);
      }
   .menu ul li:hover a{
      background:#C60;
      color:#FFFFFF;
      text-decoration:none;
      }
   .menu li ul{
      display:none;
      height:auto;
      padding:0px;
      margin:0px;
      border:0px;
      position:absolute;
      width:200px;
      z-index:200;
      }
   .menu li:hover ul{
      display:block;      
      }
   .menu li li {
      display:block;
      float:none;
      margin:0px;
      padding:0px;
      width:200px;
      background:#F93;
      /*this is where the rounded corners for the dropdown disappears*/
      }
   .menu li:hover li a{
      background:none;
      }
   .menu li ul a{
      display:block;
      height:50px;
      font-size:12px;
      font-style:normal;
      margin:0px;
      padding:0px 10px 0px 15px;
      text-align:left;
      }
   .menu li ul a:hover, .menu li ul li:hover a{
      border:0px;
      color:#ffffff;
      text-decoration:none;
      background:#C60;
      -webkit-box-shadow: inset 0px 0px 7px 2px rgba(0, 0, 0, .3);
      -moz-box-shadow: inset 0px 0px 7px 2px rgba(0, 0, 0, .3);
      box-shadow: inset 0px 0px 7px 2px rgba(0, 0, 0, .3);
      }  

ملاحظة / يتم التحكم فى الاسماء الموجودة فى النافبار وروابط توجيهها من خلال الكود الاول

والتحكم فى الخط والالوان من خلال الكود الثانى