Nav-bar

<!DOCTYPE HTML>
<html lang="en" dir="ltr">
<head>
<title>Navbar</title>
<style type="text/css">
#pokeparadise-navbar li li {
float: none;
border-bottom: 1px solid #ccc;
}

#pokeparadise-navbar li li a {
border: 0;
border-left: 1px solid #ccc;
border-right: 1px solid #ccc;
}
#pokeparadise-navbar {
position: absolute;
top: 0;
left: 0;
width: 100%;
border-bottom: 2px solid #ccc;
background: #f9f9f9;
}

#pokeparadise-navbar ol {
list-style: none;
margin: 0;
padding: .3em;
}

#pokeparadise-navbar li {
float: left;
margin-right: 5px;
}

#pokeparadise-navbar li a {
display:block;
background-color:#f9f9f9;
border: 1px solid #f9f9f9;
padding: .5em;
}

#pokeparadise-navbar li a:hover {
background-color: #333;
color: #fff;
text-decoration: none;
}

#pokeparadise-navbar li ul {
display: none;
position: absolute;
padding: 0;
list-style-type: none;
}

#pokeparadise-navbar li:hover > ul {
display: block;
}

#pokeparadise-navbar li li {
float: none;
border-bottom: 1px solid #ccc
}

#pokeparadise-navbar li li a {
border: 0;
border-left: 1px solid #ccc;
border-right: 1px solid #ccc;
}
</style>
<script type="text/javascript">
function toggle()
{
var element = document.getElementById('pokeparadise-navbar');
var link = document.getElementById('expandlink');
if (element.style.display=="none")
{
element.style.display="block";
link.innerHTML="hide";
}
else
{
element.style.display="none";
link.innerHTML="show";
}
}
</script>
</head>
<body>
<div id="pokeparadise-navbar">
<ol>
<li>
<a href="/">Home</a>
</li>
<li>
<a href="/profile">Profile</a>
<ul>
<li>
<a href="/profile/edit" class="first">Edit</a>
</li>
<li>
<a href="/profile/view">View</a>
</li>
</ul>
<li>
<a href="/products">Inbox</a>
</li>
<li>
<a href="/services">Adopt</a>
</li>
<li>
<a href="/about">Shops</a>
</li>
<li>
<a href="/contact">Bank</a>
</ul>
</li>
</ul>
</div>
<br /><br /><br />
<div><a href="javascript:toggle();" id="expandlink">hide</a></div>
</body>
</html>