Horizontal navigation üst menü

Css3 ile hazırlanmış bir üst menü örneği. Menü örneği sadece css3 kullanılarak hazırlanmıştır ve  drop down (açılır kapanır) özelliği bulunuyor. Menü  mavi ve beyaz renklerden oluşuyor kendi sitenize göre  biraz  renkler üzerinde  uğraşmanız gerek. Mouse  ile alt linklere sahip olan linklerin üzerine geldiğinizde alt link listesi biraz  altta belirip yukarı doğru çıkıyor. Mouseyi  geri çektiğiniz  zaman  alt link çerçevesi  biraz aşağı inip kayboluyor. Alt linklerin olduğu çerçevede  birde tooltip  benzeri ok işaretide mevcut. Ok işareti açılan listenin hangi kategoriye bağlı olduğunu gösteriyor. Mavi ve beyaz olarak kullanılmasa  bile eminim bir çok kişi tarafından beğenilip kullanılabilecek bir örnek.

Kullanım

• Head etiketleri arasına eklemeniz gereken bölüm.

Css : 

* {
  margin: 0;
  padding:0;
  font-family: sans-serif;
}
body {
  background-color:#999999;
}
nav {
  background-color: #468ECD;
  padding: 10px;
  width: 960px;
  margin: 50px auto;
  border-radius: 5px;
  text-align: center;
}
#menu li {
  display: inline-block;
  height: 30px;
  line-height: 30px;
  position: relative;
}
#menu ul {
  visibility:hidden;
  position: absolute;
  background-color: #468ECD;
  border-radius: 3px;
  top: 100px;
  width: 150px;
  opacity: 0;
  border:1px solid white;
  text-align: left;
  -webkit-transition: top 0.2s ease-in 0.1s ,opacity 0.3s ease-in 0.1s, visibility 0.3s ease-in;
}
#menu li:hover ul{
  opacity: 1;
  top: 37px;
  visibility:visible;
}
#menu ul:before {
  content: '';
  width: 0; 
  height: 0; 
  border-left: 7px solid transparent;
  border-right: 7px solid transparent;
  border-bottom: 7px solid white;
  position: absolute;
  top: -7px;
  left: 15px;
}
#menu ul li {
  display: block;
  position: relative;
}
#menu ul li a {
  font-size: 0.6em;
  padding: 0 8px;
}
#menu a{
  display: block;
  color: #fff;
  text-decoration: none;
  text-transform: uppercase;
  padding: 0px 10px;
  border-radius: 3px;
  font-size: 0.9em;
}
#menu a:hover {
  background-color: white;
  color: #468ECD;
  box-shadow: 0px 1px 2px rgba(0,0,0, 0.2);
  text-shadow: 0px 0px 2px rgba(0,0,0,0.5);
}
#menu ul li a {
  border-radius: 0px;
  padding-left: 30px;
}

#menu ul li a:before {
  content: '';
  display: block;
  width: 10px;
  height: 10px;
  position: absolute;
  background-color: white;
  border-radius: 50%;
  left: 10px;
  top:10px;
}
#menu ul li a:hover:before {
  background-color: #468ECD;
  width: 8px;
  height: 8px;
  left: 11px;
  top:11px;
  box-shadow: 0px 0px 2px rgba(0,0,0,0.5);
}

•  Body etiketleri arasına eklemeniz gereken bölüm.

Html : 

        <nav>
            <ul id="menu">
                <li><a href="https://www.mintik.com">Home</a></li>
                <li><a href="https://www.mintik.com/category/photoshop/">Photoshop</a></li>				
                <li><a href="https://www.mintik.com/category/webmaster/">Webmaster</a>
                    <ul>
                        <li><a href="https://www.mintik.com/category/css/">Css3</a></li>
                        <li><a href="https://www.mintik.com/category/jquery/">jQuery</a></li>
                        <li><a href="https://www.mintik.com/category/mootools/">Mootools</a></li>
                        <li><a href="https://www.mintik.com/category/yahoo-yui/">Yui</a></li>
                        <li><a href="https://www.mintik.com/category/html5/">Html5</a></li>
                    </ul>
                </li>
                <li><a href="https://www.mintik.com/category/wordpress/">Wordpress</a></li>
                <li><a href="https://www.mintik.com/generator/">Css3 Generator</a></li>
                <li><a href="https://www.mintik.com/?p=13728">Tutorial</a></li>
            </ul>
        </nav>