Blog එකට හෝ website එකකට floating menu එකක්

මේක නම් බ්ලොග් එකකට හරි වෙබ් එකකට හරි වෙරි යුසෆුල් අන්ඩ් ගෙඩක් බියුටිෆුල් ගැජට් එකක් මචන්. කරන්න තියෙන්නේ පොඩි දෙයයි පහල තියෙන html code එක copy paste කරන්න </head> tag එකෙන් පස්සෙ. ඊටපස්සෙ ඉතින් කස්ටමයිස් කරන හැටිත් මලලිලට කියලා දෙන්ඩන්කෝ..

<style>
#naviopdropcont{
width:100%;
height:35px;
display:block;
padding:0;
margin:0 0 20px 0;

z-index:100;
top:0px;
left:0px;
position:fixed;
box-shadow:2px 2px 5px #444444;
-moz-box-box-shadow:2px 2px 5px #444444;
-web-kit-box-shadow:2px 2px 5px #444444;
-goog-ms-box-shadow:2px 2px 5px #444444;
background:#555555;
}

#naviopdropnav{
float:left;
width:800px;
height:35px;
display:block;
padding:0;
margin-left:40px;
}

#naviopdropnav ul{
float:left;
margin:0;
padding:0;

}

#naviopdropnav li{
float:left;
list-style:none;
line-height:35px;
margin:0;
padding:0
background:#180000;

}

#naviopdropnav li a, #naviopdropnav li a:link{
color:#fff;
display:block;
margin:0;
font:16px georgia, verdana;
padding:10px;
text-decoration:none;
}

#naviopdropnav li a:hover, #naviopdropnav li a:active, #naviopdropnav .current_page_item a {
color:#fff;
padding:10px;
background:#007acc;}
#naviopdropnav li li a, #naviopdropnav li li a:link, #naviopdropnav li li a:visited{
font-size: 12px;
background:#180000;
color: #fff;
width: 150px;
margin: 0;
padding: 0px 10px;
line-height:28px;
position: relative;
}

#naviopdropnav li li a:hover, #naviopdropnav li li a:active {
color: #fff;
background:#007acc;
}

#naviopdropnav li ul{
z-index:9999;
position:absolute;
left:-999em;
height:auto;
width:170px;
margin:0px;
padding:0px
}

#naviopdropnav li:hover ul, #naviopdropnav li li:hover ul, #naviopdropnav li li li:hover ul, #naviopdropnav li.sfhover ul, #topnaviopdropnav li li.sfhover ul, #topnaviopdropnav li li li.sfhover ul{
left:auto
}

#naviopdropnav li:hover, #naviopdropnav li.sfhover{
position:static;
}
</style>
<style>.
-webkit-border-radius: 2em;
-moz-border-radius: 2em;
border-radius: 2em;

-webkit-box-shadow: 0 1px 0px rgba(0,0,0,.1);
-moz-box-shadow: 0 1px 0px rgba(0,0,0,.1);
box-shadow: 0 1px 0px rgba(0,0,0,.1);

background: #f1f1f1;
background: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#ededed));
background: -moz-linear-gradient(top, #fff, #ededed);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#ededed'); /* ie7 */
-ms-filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#ededed'); /* ie8 */
}
.searchform input {
font: normal 10px/100% Arial, Helvetica, sans-serif;
}
.searchform .searchfield {
background: #fff;
padding: 5px 5px 5px 7px;
width: 202px;
border: solid 1px #bcbbbb;
outline: none;

-webkit-border-radius: 2em;
-moz-border-radius: 2em;
border-radius: 2em;

-moz-box-shadow: inset 0 1px 2px rgba(0,0,0,.2);
-webkit-box-shadow: inset 0 1px 2px rgba(0,0,0,.2);
box-shadow: inset 0 1px 2px rgba(0,0,0,.2);
}
.searchform .searchbutton {
color: #fff;
border: solid 1px #000;
font-size: 11px;
height: 28px;
width: 30px;
text-shadow: 0 1px 1px rgba(0,0,0,.6);

-webkit-border-radius: 2em;
-moz-border-radius: 2em;
border-radius: 2em;
cursor:pointer;
background: #007acc;

}

</style>
<div id='naviopdropcont'>
<div id='naviopdropnav'>
<ul>
<li>
<img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh8WQWBg_6usKYWupHYDDgxpqdDtT-lcO1ZQUpkFYI_z-1lSfXQyWDqXma7OGT80jHMDzktQ0Xdwo17Ho7YqG3Hg0aLJbN0RxH2ciGZzagd7qjIJvH8S0jde2yoLb_4sGSqdTzIdiqu16g/s1600/kotaluadaviya.png'/></li>
<li><a href='http://softwarelanka.blogspot.com/'>Home</a></li><li><a href='#'>Grade 10</a>
<ul class='children'>
<li><a href='#'>sience</a>
<ul class='children'>
<li><a href='#'>Office</a></li>
<li><a href='#'>Office</a></li>
<li><a href='#'>Office</a></li>
</ul>
</li>
<li><a href='#'>Maths</a>
<ul class='children'>
<li><a href='#'>Office</a></li>
<li><a href='#'>Office</a></li>
<li><a href='#'>Office</a></li>
</ul>
</li>
<li><a href='#'>papers</a></li>
</ul>
</li>
<li><a href='#'>Downloads</a>
<ul class='children'>
<li><a href='#'>Games</a></li>
<li><a href='#'>Software</a>
<ul class='children'>
<li><a href='#'>Office</a></li>
</ul>
</li>
</ul>
</li>
<li><a href='#'>දැනගන්න</a>
<ul class='children'>
<li><a href='#'>Website</a></li>
<li><a href='#'>software</a></li>
<li><a href='#'>Programing</a></li>
<li><a href='#'>C#</a></li>
<li><a href='#'>VB</a></li>
</ul>
</li>
<li><a href='#'>News</a></li>
<li><a href='#'>Other</a>
<ul class='children'>
<li><a href='#'>බයිස්කෝප්</a></li>
<li><a href='#'>ක්‍රීඩා</a></li>
</ul>
</li>
<li><a href='#'>Uncategorized</a></li>
</ul>
</div>
<li style='float:right;padding:0px 0px ;margin:5px 18px 11px 40px; '><form action='/search' class='searchform' method='get'>
<input class='searchfield' name='q' onblur='if (this.value == '') {this.value = 'Search...';}' onfocus='if (this.value == 'Search...') {this.value = '';}' type='text' value='Search...'/>
<input class='searchbutton' type='submit' value='Go'/>
</form></li>
</div>