Hello everyone,today i gonna teach u how to put hover navigation with another menu bar in it.It ok,use the demo below for better understanding.
Hello
So here the code:
1.Open Html javascript
2.Paste the code in it,anywhere u want to put.To adjust the position,make sure u use "margin-top or margin-bottom,margin-left,or margin-right"
Eg:to make it more toward top;margin-top:-10px,increasing the number without removing the negative symbol,will make it move more upward.Same goes to left,right and bottom.Understood?
3.The code:
<style type="text/css">
#r23 {
background-color:#fff;
border-top:1px solid #fff;
border-left:1px solid #fff;
border-right:1px solid #fff;
border-bottom:1px solid #fff;
width: 120px;
text-align: center;
display:inline-block;
font-size: 8px;
letter-spacing:3px;
font-family:calibri;
text-transform: uppercase;
color: #222222;
padding:4px;
margin-bottom:-30px;
9px;transition: all 0.5s ease;
-o-transition-transition: all 0.5s ease;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
}
#r23:hover {
color:#fff;
background-color:#EEE7E8;
9px;transition: all 0.5s ease;
-o-transition-transition: all 0.5s ease;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
}
#r23:hover #t33 a:moo{
border-top:0px solid #fff;
}
#r23:hover #t33{
opacity:3;
-webkit-transition-duration:.7s;
overflow:hidden;
background-color:transparent;
z-index:966666666666666666666666666666666666666669;
height:auto;
}
#t33 {
position:absolute;
overflow:hidden;
width: 130px;
height: 0px;
text-transform: uppercase;
line-height: 20px;
font-size: 7pt;
font-family: 'Lora', serif;
padding-top: 3px;
margin-top:4px;
margin-left:-5px;
opacity:0;
transition: all 0.5s ease;
-o-transition-transition: all 0.5s ease;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
}
#t33 a{
background-color:#fff;
color: #525252;
text-align:center;
display:block;
padding:0px;
border:0px solid #e2e2e2;
text-transform: lowercase;
font-style: italic;
line-height: 20px;
font-family: 'Lora', serif;
font-size: 7pt;
transition: all 0.5s ease;
letter-spacing:2px;
-o-transition-transition: all 0.5s ease;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
}
#t33 a:hover{
text-align: right;
font-family: 'Lora', serif;
font-size: 7pt;
color:#fff;
background-color:#525252;
opacity:100;
transition: all 0.5s ease;
-o-transition-transition: all 0.5s ease;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
}
#cute {
width:100%;
text-align: center;
margin-left:0px;
margin-top:0px;
}
</style>
<!---- Change everything with your own! ----!>
<div id="head">
<div id="cute">
<div id="r23">Lands
<div id="t33">
<a href="http://tutorialsfreebies.blogspot.com/">Castle</a>
</div>
</div>
<div id="r23">About
<div id="t33">
<a href="http://tutorialsfreebies.blogspot.com/">Author</a>
</div>
</div>
<div id="r23">More
<div id="t33">
<a href="http://tutorialsfreebies.blogspot.com/">faqs</a>
</div>
</div>
<div id="r23">Lists
<div id="t33">
<a href="http://">Kawaii</a>
<a href="http://">Diary</a>
<a href="http://">Old diary</a>
</div>
</div>
<div id="r23">Contents
<div id="t33">
<a href="http://tutorialsfreebies.blogspot.com/">Tutorials</a>
</div>
</div>
<div id="r23">Networks
<div id="t33">
<a href="https://twitter.com/injulol">twitter</a>
<a href="https://www.facebook.com/hunny.julia">facebook</a>
<a href="https://instagram.com/rjuz_j/">instagram</a>
<a href="http://blogskins.com">blogskins</a>
</div>
</div>
<div id="r23">Others
<div id="t33">
<a href="http://blogger.com">dashboard</a>
<a href="http://google.com/">google</a>
<a href="http://">follow?</a>
</div>
</div></div></div></div></center>
4.Want to add more navigation?Just add the similar code highlighted in red,but adjusting the name and the link u wanna put.That's all.Good luck.
5.The chocolate highlighted font is for the menu bar visible that u can see,adjust it just like normal menu bar with hover.
6.The purple one is for the hidden menu bar,where,when u hover on it,it will appear more menu bar in it.aAdjust depend on your creativity.
Big clap to: 
