Question

当您点击我的下拉菜单中的链接时，该网址会继续将下一个网址/页面添加到上一个网址。下面是我的代码和问题的屏幕截图。我做错了什么？

#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>

请注意此处的网址：

Issue Screenshot

Answer 1

您的链接具有相对路径，这意味着href="..."中的部分将添加到浏览器中的当前地址。

将href="..."更改为此：

 <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>

开头的/表示该链接将从域开始。

// 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

将此代码添加到您的网站

@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">
        <a href="gilbertlzrus.blogspot.com"><i class="material-icons" style="font-size:25px;line-height: 25px;">home</i></a>
    </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>

Blogger下拉菜单问题

2 个答案: