Cute Yellow Navigation Menu untuk Blog, contoh sepeti gambar di atas.
Detail penampakan Cute Yellow Navigation Menu:
LIVE DEMO
Kode cssnya sebagai berikut, simpan di layout sobat.
<style type="text/css">
#menu6 ul {
list-style:none;
font-family: "Trebuchet MS", sans-serif;
font-size: 28px;
font-weight: bold;
letter-spacing: -1px;
line-height: 1.1em;
float:left;
clear:both;
margin:20px;
border:4px groove #ffe430;
}
#menu6 ul li{
float:left;
}
#menu6 ul li a{
display:block;
text-decoration:none;
padding:10px 10px 5px 10px;
color:#fff;
background-color:#ffc730;
width:170px;
}
#menu6 ul li a span{
display:block;
}
#menu6 ul li a span.title{
border-bottom:2px solid #ffc730;
}
#menu6 ul li a:hover{
background-color:#fff;
}
#menu6 ul li a:hover span.title{
color:#ffc730;
border-bottom:2px solid #ffe430;
}
#menu6 ul li a span.text{
padding:0px 5px;
font-family: Helvetica, Arial, sans-serif;
font-size: 14px;
font-style: italic;
font-weight: normal;
letter-spacing: normal;
line-height: 1.4em;
background-color:#ffc730;
visibility:hidden;
color:#fff;
}
#menu6 ul li a:hover span.text{
visibility:visible;
}
</style>
<div id="menu6">
<ul>
<li><a href="">
<span class="title">About</span>
<span class="text">Who we are</span>
</a>
</li>
<li><a href="">
<span class="title">Portfolio</span>
<span class="text">What we do</span>
</a>
</li>
<li><a href="">
<span class="title">Blog</span>
<span class="text">What we talk about</span>
</a>
</li>
<li><a href="">
<span class="title">Contact</span>
<span class="text">How to get in touch</span>
</a>
</li>
</ul>
</div>
