Blogger Drop Down Menu Issue

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>
        <a href="/">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>

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