menu arrow menawan css mywapblog

#navigation{ overflow: hidden; width: 100%; clear:both;margin: 0 auto; padding: 0; margin: 0 6px; } #navigation span{ float: left; margin: 0; padding: 0; list-style: none; margin-left: auto !important; margin-right: auto !important; margin: 0 .5em 0 1em; font-size: 13px; } #navigation a { padding: .7em 1em .7em 2em; float: left; position: relative; text-decoration: none; color: #fff; margin-right:4px; } #navigation a:hover{ background: #0f53b0; } #navigation a:before{ content: ""; position: absolute; top: 50%; margin-top: -1.5em; border-width: 1.5em 0 1.5em 1em; border-style: solid; border-color: #1478ff #1478ff #1478ff transparent; left: -1em; z-index:1; } #navigation a:after{ content: ""; position: absolute; top: 50%; margin-top: -1.5em; border-top: 1.5em solid transparent; border-bottom: 1.5em solid transparent; border-left: 1em solid #1478ff; right: -1em; z-index:2; } #navigation span:nth-child(3) a, #navigation span:nth-child(2) a, #navigation span:nth-child(1) a { text-align: right; text-transform: capitalize; margin-left: 12px; padding: 4px 4px 8px 8px; background:#1478ff;} #navigation span:first-child a{ padding-left: 1em; }
NOTE :
margin-left: 12px : ini buat mengatur jarak antar menu
sebagai catatan 1em > 12pt > 16px > 100%

Demikian dari itu Tambahan, kritik dan saran dipersilahkan :)

Baca Juga :

1. Membuat efek kertas terlipat mwb next 2
2. Menu Keren Mwb Bag.11
3. Menu Keren Mwb Bag.1
4. Background Efek Jahitan Mwb
5. Css Efek Kertas Bertumpuk Mywapblog
6. Css Efek Benjolan Mywapblog
7. Mempersingkat Css border
8. Efek Sudut Terlipat Mywapblog 1