Blogger Drop Down Menu Issue - html

Question

When you click on links in my drop-down menu, the URL just keeps adding the next url/page to the previous one. Below is my code and a screenshot of the issue. What am I doing wrong?
#menubar {
background: #00ffffff;
width: 840px;
color: #FFF;
margin: 0px;
padding: 0;
position: relative;
border-top: 0px solid #B2FFFF;
height: 35px;
}
#menus {
margin: 0;
padding: 0;
}
#menus ul {
float: left;
list-style: none;
margin: 0;
padding: 0;
}
#menus li {
list-style: none;
margin-bottom: 10px;
padding-bottom: 0px;
border-left: 1px solid #D3D3D3;
border-right: 1px solid #D3D3D3;
height: 35px;
}
#menus li a,
#menus li a:link,
#menus li a:visited {
color: #000;
display: block;
font: normal 20px Bradley Hand ITC, Book Antiqua, Century Gothic, Harlow Solid Italic, Arial Unicode MS;
margin: 0;
padding: 9px 12px 10px 12px;
text-decoration: none;
}
#menus li a:hover,
#menus li a:active {
background: #130000;
/* Menu hover */
color: #FFF;
display: block;
text-decoration: none;
margin: 0;
padding: 9px 12px 10px 12px;
}
#menus li {
float: left;
padding: 0;
}
#menus li ul {
z-index: 9999;
position: absolute;
left: -999em;
height: auto;
width: 160px;
margin: 0;
padding: 0;
}
#menus li ul a {
width: 140px;
}
#menus li ul ul {
margin: -25px 0 0 160px;
}
#menus li:hover ul ul,
#menus li:hover ul ul ul,
#menus li.sfhover ul ul,
#menus li.sfhover ul ul ul {
left: -999em;
}
#menus li:hover ul,
#menus li li:hover ul,
#menus li li li:hover ul,
#menus li.sfhover ul,
#menus li li.sfhover ul,
#menus li li li.sfhover ul {
left: auto;
}
#menus li:hover,
#menus li.sfhover {
position: static;
}
#menus li li a,
#menus li li a:link,
#menus li li a:visited {
background: #00FFFF;
/* drop down background color */
width: 120px;
color: #FFF;
display: block;
font: normal 20px Bradley Hand ITC, Book Antiqua, Century Gothic, Harlow Solid Italic, Arial Unicode MS;
margin: 0;
padding: 9px 12px 10px 12px;
text-decoration: none;
z-index: 9999;
border-bottom: 1px solid #1A6680;
}
#menus li li a:hover,
#menus li li a:active {
background: #130000;
/* Drop down hover */
color: #FFF;
display: block;
margin: 0;
padding: 9px 12px 10px 12px;
text-decoration: none;
}
<div id='menubar'>
<ul id='menus'>
<li>
<a href='gilbertlzrus.blogspot.com'>Home</a>
</li>
<li>
<a href='search/label/Posts'>Posts</a>
<ul>
<li><a href='search/label/FKUI'>FK UI</a></li>
<li><a href='search/label/Articles'>Articles</a></li>
<li><a href='search/label/Download'>Download</a></li>
</ul>
</li>
<li>
<a href='#'>About Me</a>
</li>
</ul>
</div>
Notice the URL here:

Answer 1

Your links are with a relative path, meaning that the part in href="..." will be added to the current address in the browser.
Change the href="..." to this:
<div id='menubar'>
<ul id='menus'>
<li>
Home
</li>
<li>
Posts
<ul>
<li>FK UI</li>
<li>Articles</li>
<li>Download</li>
</ul>
</li>
<li>
<a href='#'>About Me</a>
</li>
</ul>
</div>
a / at the beginning means that the link will start at the domain.
// Examples:
// href="/" => http(s)://CURRENT_DOMAIN/
// href="/search/label/FKUI" => http(s)://CURRENT_DOMAIN/search/label/FKUI
// href="search/label/FKUI" => http(s)://CURRENT_DOMAIN/CURRENT_PATH/search/label/FKUI

Answer 2

Add this Code to you website
#import url(http://fonts.googleapis.com/css?family=Montserrat);
#import url(https://fonts.googleapis.com/icon?family=Material+Icons);
* {
margin: 0;
padding: 0;
}
.nav {
background: #232323;
height: 60px;
display: inline-block;
}
.nav li {
float: left;
list-style-type: none;
position: relative;
}
.nav li a {
font-size: 16px;
color: white;
display: block;
line-height: 60px;
padding: 0 26px;
text-decoration: none;
border-left: 1px solid #2e2e2e;
font-family: Montserrat, sans-serif;
text-shadow: 0 0 1px rgba(255, 255, 255, 0.5);
}
.nav li a:hover {
background-color: #2e2e2e;
}
#settings a {
padding: 18px;
height: 24px;
font-size: 10px;
line-height: 24px;
}
::-webkit-input-placeholder { /* WebKit browsers */
color: white;
}
:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
color: white;
}
::-moz-placeholder { /* Mozilla Firefox 19+ */
color: white;
}
:-ms-input-placeholder { /* Internet Explorer 10+ */
color: white;
}
#options a{
border-left: 0 none;
}
#options>a {
background-image: url(triangle.png);
background-position: 85% center;
background-repeat: no-repeat;
padding-right: 42px;
}
.subnav {
visibility: hidden;
position: absolute;
top: 110%;
right: 0;
width: 200px;
height: auto;
opacity: 0;
transition: all 0.1s;
background: #232323;
}
.subnav li {
float: none;
}
.subnav li a {
border-bottom: 1px solid #2e2e2e;
}
#options:hover .subnav {
visibility: visible;
top: 100%;
opacity: 1;
}
<ul class="nav">
<li id="settings">
<i class="material-icons" style="font-size:25px;line-height: 25px;">home</i>
</li>
<li>
<a href='search/label/Posts'>Posts</a>
</li>
<li id="options">
<a href='search/label/Posts'>Posts</a>
<ul class="subnav">
<li><a href='search/label/FKUI'>FK UI</a></li>
<li><a href='search/label/Articles'>Articles</a></li>
<li><a href='search/label/Download'>Download</a></li>
</ul>
</li>
<li>
<a href='#'>About Me</a>
</li>
</ul>