The original navigation bar, it takes time to render it.
Want to replace it with a quicker and simple navigation scheme.
<form>
Site Search:
<input type = "text"
id = "sitesearch"
value="OCAJP"
onkeydown = "if (event.keyCode == 13)
document.getElementById('btnSearch').click()"
/>
<input type = "button"
id = "btnSearch"
value = "Search"
onclick = "var uri = 'https://www.google.com/search?as_sitesearch=xyzcode.blogspot.com&q='+document.getElementById('sitesearch').value; window.open(uri);"
/>
</form>
<style>
#subnavbar {
background: #000;
height: 27px;
color: #FFFFFF;
margin: 0px;
padding: 0px;
}
#subnav {
margin: 0px;
padding: 0px;
border: none;
}
#subnav ul {
float: left;
list-style: none;
margin: 0px;
padding: 0px;
}
#subnav li {
float: left;
list-style: none;
margin: 0px;
padding: 0px;
}
#subnav li a, #subnav li a:link, #subnav li a:visited {
color: #FFFFFF;
display: block;
font-size: 10px;
font-weight: bold;
text-transform: uppercase;
margin: 0px 5px 0px 0px;
padding: 6px 13px 6px 13px;
border: none;
}
#subnav li a:hover, #subnav li a:active {
background: #6e6d6d;
color: #FFFFFF;
display: block;
text-decoration: none;
margin: 0px 5px 0px 0px;
padding: 6px 13px 6px 13px;
border: none;
}
#subnav li li a, #subnav li li a:link, #subnav li li a:visited {
background: #333;
width: 140px;
float: none;
margin: 0px;
padding: 6px 10px 6px 10px;
border-bottom: 1px solid #FFFFFF;
border-left: 1px solid #FFFFFF;
border-right: 1px solid #FFFFFF;
}
#subnav li li a:hover, #subnav li li a:active {
background: #666;
margin: 0px;
padding: 6px 10px 6px 10px;
}
#subnav li ul {
z-index: 9999;
position: absolute;
left: -999em;
height: auto;
width: 160px;
margin: 0px;
padding: 0px;
}
#subnav li li {
}
#subnav li ul a {
width: 140px;
}
#subnav li ul a:hover, #subnav li ul a:active {
}
#subnav li ul ul {
margin: -25px 0 0 161px;
}
#subnav li:hover ul ul, #subnav li:hover ul ul ul, #subnav li.sfhover ul ul, #subnav li.sfhover ul ul ul {
left: -999em;
}
#subnav li:hover ul, #subnav li li:hover ul, #subnav li li li:hover ul, #subnav li.sfhover ul, #subnav li li.sfhover ul, #subnav li li li.sfhover ul {
left: auto;
}
#subnav li:hover, #subnav li.sfhover {
position: static;
}
</style>
<div id='subnavbar'>
<ul id='subnav'>
<li><a href='/'>home</a></li>
<li><a href='http://xyzcode.blogspot.com/search/label/java%208'> Java 8</a>
<ul>
<li>
<a href='http://xyzcode.blogspot.com/2016/02/oca-exam-1z0-808-breaks-down.html'>Basic</a>
</li>
<li>
<a href='http://xyzcode.blogspot.com/2016/07/ocp-exam-1z0-809-breaks-down.html'>Advanced</a>
</li>
<li>
<a href='http://xyzcode.blogspot.com/2016/04/java-concurrency-in-practice-with.html'> Java Concurrency</a>
</li>
</ul>
</li>
<li><a href='http://xyzcode.blogspot.com/2018/01/java-algorithm.html'> Algorithm</a>
</li>
<li><a href='http://xyzcode.blogspot.com/2018/02/architect.html'> Tools</a>
<ul>
<li><a href='http://xyzcode.blogspot.com/2018/05/splunk-in-30-minutes.html'> Splunk</a></li>
<li><a href='http://xyzcode.blogspot.com/2018/09/how-to-set-up-dynamic-web-service-with.html'>Dynamic Web Project</a></li>
<li><a href='http://xyzcode.blogspot.com/2018/09/how-to-create-soap-web-service-in-5.html'>soap web service</a></li>
<li><a href='http://xyzcode.blogspot.com/2018/02/architect.html'>misc</a></li>
</ul></li>
<li>
<a href='http://xyzcode.blogspot.com/2017/07/javascript-games.html'>Games</a>
</li>
<li><a href='http://xyzcode.blogspot.com/search/label/resources'> Resources</a>
<ul>
<li><a href='http://xyzcode.blogspot.com/2016/05/5-minutes-solutions.html'> Blogger Tips</a></li>
<li><a href='http://xyznetwork.blogspot.com'>xyznetwork</a></li>
<li><a href='http://kl2217.wordpress.com'>IT Security</a></li>
<li><a href='http://cyberjedizen.blogspot.com'>misc</a></li>
<li><a href='https://xyzcode.blogspot.com/2019/06/recommend-books.html'>books</a></li>
</ul></li>
<li>
<a href='http://xyzcode.blogspot.com/2017/01/about.html'>About</a>
</li>
</ul></div>
