Güzel Bir Css Menü Örneği

Örnek:

• Ana Sayfa
• Link Değişimi
• B Format Code

• Subscribe to our feed
  • feeds
  • blogger
  • Subscribe
• Fan us on Facebook
• Follow us on Twitter

CSS:

/* Menub */
.menub{width: 500px; height: 35px; margin-bottom: 11px}
.navb {float: left; line-height: 1; background-color: #ca4020; width: 500px; overflow: hidden; margin: 0}
.navb, .navb * { list-style: none; margin-left: 0; }
.navb li { float: left; padding: 0; position: relative; }
.navb ul li { width: 500px; }

.navb a { display: block; position: relative; padding: 0 45px 0 32px; line-height: 35px; height: 35px }
.cufon-active .navb a{padding-top: 12px; padding-bottom: 11px}
.navb li{margin-left: -17px}

/* Default Skin */
.navb {font-size: 12px; font-weight: bold; text-transform: uppercase }
.navb ul { border: 1px solid #ddd; border-bottom: none; }
.navb ul li a { border-bottom: 1px solid #ddd; }
.navb li:hover ul, .nav li.nav-hover ul {}

.navb a { color: #fff; background: url(http://bloggeriz.googlecode.com/files/bkgrd.menu.png) no-repeat}
.navb a:hover, .navb li.current_page_item a, .navb li.current_page_ancestor a { text-decoration: none; background-position: right -70px}
.navb ul a { border-right: none; }
.navb li{background: url(http://bloggeriz.googlecode.com/files/bkgrd.menu.png) no-repeat}
.navb li:hover, .navb li.navb-hover, .navb li.current_page_item, .navb li.current_page_ancestor { background-position: left -35px; } /* , .nav a:focus */

.ie7 .navb li:first-child:hover, .ie7 .navb li.nav-hover:first-child, .ie7 .navb li.current_page_item:first-child{background-position: left -105px}

/* Menub bugfix */
.ie7 .navb:hover { visibility: inherit; /* fixes IE7 'sticky bug' */ }

/* Social Icons */
div#navb-social{width: 200px; height: 35px; background: #930609; margin-left: 500px}
div#navb-social ul{list-style: none; margin: auto; width: 150px;}
div#navb-social ul li{width: 36px; height: 35px; margin: 0; background: none; float: left; position: relative}

div#navb-social ul li a{display: block; width: 36px; height: 35px; background: url(http://bloggeriz.googlecode.com/files/icon.social.png) no-repeat 0 0; text-indent: -9999px}
div#navb-social ul li#rss a{background-position: 0 0}
div#navb-social ul li#rss a:hover{background-position: 0 -35px}
/* RSS Dropdown */
div#navb-social ul li#rss ul{top: -9999em; position: absolute; width: 80px; text-transform: uppercase; font-weight: bold; font-size: 85%}
div#navb-social ul li#rss:hover ul{left: 0; top: 35px; background-color: #ca4020; z-index: 100}
div#navb-social ul li#rss ul li{width: 80px;}
div#navb-social ul li#rss ul li a{text-indent: 0; color: #fff; background-color: #930609; background-image: none; width: 64px; padding: 8px 8px 0px 8px; height: 27px}
.cufon-active div#nav-social ul li#rss ul li a{padding: 12px 8px 0 8px}
div#navb-social ul li#rss ul li a:hover{background-color: #ca4020; text-decoration: none}

div#navb-social ul li#email a{background-position: -144px 0}
div#navb-social ul li#email a:hover{background-position: -144px -35px}
div#navb-social ul li#facebook a{background-position: -36px 0}
div#navb-social ul li#facebook a:hover{background-position: -36px -35px}
div#navb-social ul li#twitter a{background-position: -72px 0}
div#navb-social ul li#twitter a:hover{background-position: -72px -35px}
div#navb-social ul li#delicious a{background-position: -108px 0}
div#navb-social ul li#delicious a:hover{background-position: -108px -35px}

HTML:

<div class='menub'><ul class='navb'><li class='current_page_item'><a href='http://bloggeriz.blogspot.com/'>Ana Sayfa</a></li><li class='page_item page-item-365'><a href='http://bloggeriz.blogspot.com/p/link-degisimi.html'>Link Değişimi</a></li>
<li class='page_item page-item-5'><a href='http://bloggeriz.blogspot.com/p/pre.html'>B Format Code</a></li>

</ul><div id='navb-social'><ul><li id='rss'><a href='http://feeds.feedburner.com/bloggerdesing'>Subscribe to our feed</a>   <ul> 
    <li><a href='http://feeds.feedburner.com/bloggerdesing' title='Subscribe bloggeriz'>feeds</a></li> 
    
    <li><a href='http://feeds.feedburner.com/bloggerdesing' title='Subscribe '>blogger</a></li>   
    <li><a href='http://feeds.feedburner.com/bloggerdesing' title='Subscribe to Events'>Subscribe</a></li>  
   </ul>  
   </li><li id='facebook'><a href='http://www.facebook.com/'>Fan us on Facebook</a></li><li id='twitter'><a href='http://twitter.com/bloggeriz'>Follow us on Twitter</a></li></ul></div></div>

Menüyü sığması için daralttım,siz temanıza göre ayarlarsınız.