css - 超过所需大小的链接

Question

所以在我的网站上，http://test.crows-perch.com/我有菜单栏。但是，当您将鼠标悬停在橙色背景(带横幅的背景)上时，我可以看到链接正在爬到那个空间，我不知道如何解决这个问题，有什么帮助吗？

  @charset "utf-8";
  /* CSS Document */
  body {
      background: url(../images/background-texture%20d.jpg);
  }

  #page {
     z-index: 1;
     width: 1000px;
     min-height: 1257px;
     margin-left: auto;
     margin-right: auto;
  }

  #TopLinks {
      z-index: 1;
      position:absolute;
      top: 0px;
      left: 0px;
      width: 100%;
      margin: 0;
      height: 37px;
      border-style: solid;
      border-width: 1px;
      border-color: #000000;
      background: url(../images/background-texture-b.jpg);
  }

  #Links {
      position: relative;
      top: 5px;
      left: 329px;
     text-align:center;
      }

  #Links a{
      text-decoration: none;
      color: #7F7F7F;
      font-family: Verdana, Tahoma, Geneva, sans-serif;
      font-size: 13px;

  }

  #Links a:hover{
      text-decoration: none;
      color: #FFFFFF;
  }  

  #HeaderContainer {
      z-index: 3;
      position: absolute;
      top: 28px;
      left: 0px;
      width: 100%;
      height: 65px;
      margin: 0;
      background: url(../images/tri-button%20texture%20b.jpg);
      border-style: solid;
      border-width: 1px;
      border-color: #7F7F7F;
 }
  #title {
      z-index: 4;
      position: relative;
      width: 252px;
      height: 70px;
      margin: 0 auto;
      top:-10px;
      right: 383px;
  }

  #Home {
      z-index: 4;
      position: relative;
      width: 96px;
      height: 65px;
      margin: 0 auto;
      right: 204px;
      top:-70px;
      background: url(../images/button%20texture%20b.jpg);
      border-style: solid;
      border-width: 1px;
      border-color: #7F7F7F;
      border-top: none;
      border-bottom: none;
      text-align: center;
  }

  #Home:hover {
      width: 96px;
      background:url(../images/button%20overlay%20b.png) no-repeat center, url(../images/button%20texture%20b.jpg) no-repeat top left;
      background-size: cover;
  }

    #HomeT {
      text-decoration: none;
      font-family: "Cinzel Regular";
      font-size: 18px;
      letter-spacing: 1px;
      color: #D2C300;
      line-height: 65px;
      vertical-align: middle;
  } 

    a.Home { 
      text-decoration: none; 
      height: 65px;
    }

  #Guides {
      z-index: 4;
      position: relative;
      margin: 0 auto;
      top: -135px;
      right: 89px;
      width: 133px;
      height: 65px;
      background: url(../images/button%20texture%20b.jpg);
      border-style: solid;
      border-width: 1px;
      border-color: #7F7F7F;
      border-top: none;
      border-bottom: none;
      text-align: center;
  }

 #Guides:hover {
      width: 133px;
      background:url(../images/button%20overlay%20b.png) no-repeat center, url(../images/button%20texture%20b.jpg) no-repeat top left;
      background-size: cover;
  }

  #GuidesT {
      text-decoration: none;
      font-family: "Cinzel Regular";
      font-size: 18px;
      letter-spacing: 1px;
      color: #D2C300;
      line-height: 65px;
      vertical-align: middle;
  } 

  a.Guides { 
      text-decoration: none; 
  }     

  #Forum {
      z-index: 4;
      position: relative;
      margin: 0 auto;
      top: -200px;
      left: 33px;
      width: 114px;
      height: 65px;
      background: url(../images/button%20texture%20b.jpg);
      border-style: solid;
      border-width: 1px;
      border-color: #7F7F7F;
      border-top: none;
      border-bottom: none;
      text-align: center;
 }

 #Forum:hover {
      width: 114px;
      background:url(../images/button%20overlay%20b.png) no-repeat center, url(../images/button%20texture%20b.jpg) no-repeat top left;
      background-size: cover;
  }

   #ForumT {
      text-decoration: none;
      font-family: "Cinzel Regular";
      font-size: 18px;
      letter-spacing: 1px;
      color: #D2C300;
      line-height: 65px;
      vertical-align: middle;
  } 

  a.Forum {  
      text-decoration: none;
  }


 #Blog {
      z-index: 4;
      position: relative;
      margin: 0 auto;
      top: -265px;
      left: 141px;
      width: 102px;
      height: 65px;
      background: url(../images/button%20texture%20b.jpg);
      border-style: solid;
      border-width: 1px;
      border-color: #7F7F7F;
      border-top: none;
      border-bottom: none;
      text-align: center;
  }

 #Blog:hover {
      width: 102px;
      background:url(../images/button%20overlay%20b.png) no-repeat center, url(../images/button%20texture%20b.jpg) no-repeat top left;
      background-size: cover;
  }

 #BlogT {
      text-decoration: none;
      font-family: "Cinzel Regular";
      font-size: 18px;
      letter-spacing: 1px;
      color: #D2C300;
      line-height: 65px;
      vertical-align: middle;
  } 

 a.Blog { 
       text-decoration: none; 
    }

 #Guilds {
      z-index: 4;
      position: relative;
      margin: 0 auto;
      top: -330px;
      left: 262px;
      width: 138px;
      height: 65px;
      background: url(../images/button%20texture%20b.jpg);
      border-style: solid;
      border-width: 1px;
      border-color: #7F7F7F;
      border-top: none;
      border-bottom: none;
      text-align: center;
  }

 #Guilds:hover {
      width: 138px;
      background:url(../images/button%20overlay%20b.png) no-repeat center, url(../images/button%20texture%20b.jpg) no-repeat top left;
      background-size: cover;
  }

   #GuildsT {
      text-decoration: none;
      font-family: "Cinzel Regular";
      font-size: 18px;
      letter-spacing: 1px;
      color: #D2C300;
      line-height: 65px;
      vertical-align: middle;
  } 

  a.Guilds { 
     text-decoration: none; 
  }

   #Play {
      z-index: 4;
      position: relative;
      margin: 0 auto;
      width: 168px;
      height: 65px;
      top: -395px;
      left: 415px;
      background: url(../images/button%20texture%20bright.jpg) ;
      background-size: cover; 
      border-style: solid;
      border-width: 1px;
      border-color: #7F7F7F;
      border-top: none;
      border-bottom: none;
      text-align: center;
  }

   #Play:hover {
      width: 168px;
      background: url(../images/button%20overlay%20c.png) no-repeat center, url(../images/button%20texture%20bright.jpg) no-repeat top left;
      background-size: cover;
  }

   #PlayT {
     text-decoration: none;
     font-family: "Cinzel Bold";
     font-size: 18px;
     font-weight: bold;
     color: #000000;
     line-height: 64px;
     vertical-align: middle;
 }

     a.Play { 
       text-decoration: none;
     }

  #Top-Gradient {
      z-index: 6;
      position: absolute;
      top: 95px;
      left: 0px;
      width: 100%;
      height:25px;
      margin: 0;
      background: url(../images/gradient.png) repeat-x;
  }

   #PictureContainer-top {
       z-index: 1;
       position: absolute;
       top: 95px;
       left: -2px;
       width: 100%;
       height: 423px;
       margin: 0;
       background: url(../images/fire%20bg%20art.jpg) center no-repeat; 
       background-size: 100%;
   }

 #G1 {
     z-index: 1;
     width: 1037px;
     height: 19px;
     left: -19px;
     top: 194px;
     background: -webkit-gradient(linear, center top, center bottom, from(rgba(0, 0, 0, 0)),color-stop(100%, #000000));
     background: -webkit-linear-gradient(top,rgba(0, 0, 0, 0) ,#000000 100%);
     background: -o-linear-gradient(top,rgba(0, 0, 0, 0) ,#000000 100%);
     background: linear-gradient(to bottom,rgba(0, 0, 0, 0) ,#000000 100%);
     filter: alpha(opacity=50) progid:DXImageTransform.Microsoft.gradient(startColorstr=#00000000, endColorstr=#FF000000, GradientType=0);
     -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50) progid:DXImageTransform.Microsoft.gradient(startColorstr='#00000000', endColorstr='#FF000000', GradientType=0)";
     border-color: #000000;
     opacity: 0.5;
     position: relative;

 }

 #ContentTop {
     z-index: 5;
     position: relative;
     margin: 0 auto;
     background: url(../images/tri-button%20texture.jpg) repeat-x center top;
     width: 1037px;
     height: 49px;
     left: -19px;
     top: 173px;
     webkit-box-shadow: 0px 0px 17px -1px #000000;
     box-shadow: 0px 0px 17px #000000;
     border-width: 1px;
     border-style: solid;
     border-color: #000000;
 }

 #TeamUp {
      z-index: 6;
      position: relative;
      margin: 0 auto;
      top: -23px;
      left: 320px;
 }

 #G2 {
   z-index: 177;
   width: 1039px;
   height: 19px;
   top: -60px;
   background: -webkit-gradient(linear, center top, center bottom, from(rgba(0, 0, 0, 0)),color-stop(100%, #000000));
   background: -webkit-linear-gradient(top,rgba(0, 0, 0, 0) ,#000000 100%);
   background: -o-linear-gradient(top,rgba(0, 0, 0, 0) ,#000000 100%);
   background: linear-gradient(to bottom,rgba(0, 0, 0, 0) ,#000000 100%);
   filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#00000000, endColorstr=#FF000000, GradientType=0);
   -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#00000000', endColorstr='#FF000000', GradientType=0)";
   border-color: #000000;
   position: relative;
   margin: 0 auto;
 }

 #ContentAfterTop {
     z-index: 10;
     width: 1011px;
     height:35px;
     top: -60px;
     position: relative;
     margin: 0 auto;
     webkit-box-shadow: 6px 6px 43px -1px #000000;
     box-shadow: 6px 6px 43px #000000;
     border-width: 1px;
     border-style: solid;
     border-color: #000000;
     position: relative;
     background: url(../images/tri-button%20texture.jpg) repeat left top;

 }

 #G3 {
    z-index: 4;
    width: 267px;
    height: 19px;
    position: relative;
    margin: 0 auto;
    left: -633px;
    top: 120px;
    background: -webkit-gradient(linear, center top, center bottom, from(rgba(0, 0, 0, 0)),color-stop(100%, #000000));
    background: -webkit-linear-gradient(top,rgba(0, 0, 0, 0) ,#000000 100%);
    background: -o-linear-gradient(top,rgba(0, 0, 0, 0) ,#000000 100%);
    background: linear-gradient(to bottom,rgba(0, 0, 0, 0) ,#000000 100%);
    filter: alpha(opacity=50) progid:DXImageTransform.Microsoft.gradient(startColorstr=#00000000, endColorstr=#FF000000, GradientType=0);
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50) progid:DXImageTransform.Microsoft.gradient(startColorstr='#00000000', endColorstr='#FF000000', GradientType=0)";
    border-color: #000000;
    opacity: 0.5;
    -webkit-transform: matrix(0,-1,1,0,124,143);
    -ms-transform: matrix(0,-1,1,0,124,143);
    -o-transform: matrix(0,-1,1,0,124,143);
    transform: matrix(0,-1,1,0,124,143);
 }

 #G3-2 {
    z-index: 3;
    width: 269px;
    height: 19px;
    margin-top: 400px;
    left: 730px;
    background: -webkit-gradient(linear, center top, center bottom, from(rgba(0, 0, 0, 0)),color-stop(100%, #000000));
    background: -webkit-linear-gradient(top,rgba(0, 0, 0, 0) ,#000000 100%);
    background: -o-linear-gradient(top,rgba(0, 0, 0, 0) ,#000000 100%);
    background: linear-gradient(to bottom,rgba(0, 0, 0, 0) ,#000000 100%);
    filter: alpha(opacity=50) progid:DXImageTransform.Microsoft.gradient(startColorstr=#00000000, endColorstr=#FF000000, GradientType=0);
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50) progid:DXImageTransform.Microsoft.gradient(startColorstr='#00000000', endColorstr='#FF000000', GradientType=0)";
    border-color: #000000;
    opacity: 0.5;
    -webkit-transform: matrix(0,1,-1,0,144,-125);
    -ms-transform: matrix(0,1,-1,0,144,-125);
    -o-transform: matrix(0,1,-1,0,144,-125);
    transform: matrix(0,1,-1,0,144,-125);
    position: relative;
 }

 #AfterPicBreak {
    z-index: 3;
    height: 240px;
    border-color: #000000;
    background: url(../images/bg%20texture%20top.jpg) repeat-x left top;
    position: absolute;
    margin: 0 auto;
    top: 485px;
    left: 0px;
    width: 100%;

 }

 #G4 {
    z-index: 2;
    height: 92px;
    width: 100%;
    position: absolute;
    left: 0px;
    top: 430px;
    background: -webkit-gradient(linear, center top, center bottom, from(rgba(0, 0, 0, 0)),color-stop(100%, #000000));
    background: -webkit-linear-gradient(top,rgba(0, 0, 0, 0) ,#000000 100%);
    background: -o-linear-gradient(top,rgba(0, 0, 0, 0) ,#000000 100%);
    background: linear-gradient(to bottom,rgba(0, 0, 0, 0) ,#000000 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#00000000, endColorstr=#FF000000, GradientType=0);
    -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#00000000', endColorstr='#FF000000', GradientType=0)";
    border-color: #000000; 
 }

 #G5 {
    z-index: 5 ;
    width: 999px;
    height: 19px;
    position: relative;
    margin: 0 auto;
    right: 999px;
    top: -247px; 
    background: -webkit-gradient(linear, center top, center bottom, from(rgba(0, 0, 0, 0)),color-stop(100%, #000000));
    background: -webkit-linear-gradient(top,rgba(0, 0, 0, 0) ,#000000 100%);
    background: -o-linear-gradient(top,rgba(0, 0, 0, 0) ,#000000 100%);
    background: linear-gradient(to bottom,rgba(0, 0, 0, 0) ,#000000 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#00000000, endColorstr=#FF000000, GradientType=0);
    -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#00000000', endColorstr='#FF000000', GradientType=0)";
    border-color: #000000;
    -webkit-transform: matrix(-1,0,0,-1,999,19);
    -ms-transform: matrix(-1,0,0,-1,999,19);
    -o-transform: matrix(-1,0,0,-1,999,19);
    transform: matrix(-1,0,0,-1,999,19);
 }

 #ContentBreak {
    z-index: 4;
    background: url(../images/break%20-%20large.jpg) repeat-x left top; 
    position:relative;
    left: 0px;
    top: -260px;
    width: 999px;
    height: 61px;
 }

 #Content {
    z-index: 3;
    background: url(../images/content%20bg.jpg) repeat left top;
    position: relative;
    top: -280px;
    left: 0px;
    width: 999px;
    height: 88px;
    padding-bottom: 640px;

 }

#G6 {
    z-index: 3;
    position: relative;
    margin: 0 auto;
    top: -1015px;   
    left: -997px;
    width: 996px;
    height: 19px;
    background: -webkit-gradient(linear, center top, center bottom, from(rgba(0, 0, 0, 0)),color-stop(100%, #000000));
    background: -webkit-linear-gradient(top,rgba(0, 0, 0, 0) ,#000000 100%);
    background: -o-linear-gradient(top,rgba(0, 0, 0, 0) ,#000000 100%);
    background: linear-gradient(to bottom,rgba(0, 0, 0, 0) ,#000000 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#00000000, endColorstr=#FF000000, GradientType=0);
    -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#00000000', endColorstr='#FF000000', GradientType=0)";
    border-color: #000000;
    -webkit-transform: matrix(-1,0,0,-1,996,19);
    -ms-transform: matrix(-1,0,0,-1,996,19);
    -o-transform: matrix(-1,0,0,-1,996,19);
    transform: matrix(-1,0,0,-1,996,19);
}

#ContentSmallBreak {
    z-index: 4;
    background: url(../images/small%20break.jpg) repeat-x left top;
    width:999px;
    height: 34px;
    position: relative;
    margin: 0 auto;
    top: -930px;    
}

 @font-face
 {
     font-family: 'Cinzel Regular';
     src: url('../fonts/cinzel-regular-webfont.eot');
     src: url('../fonts/cinzel-regular-webfont.woff') format('woff'), url('../fonts/cinzel-regular-webfont.svg') format('svg');
     font-weight: 400;
     font-style: normal;
 }

 @font-face
 {
    font-family: 'Cinzel Bold';
     src: url('../fonts/cinzel-regular-bold.eot');
     src: url('../fonts/cinzel-regular-bold.woff') format('woff'), url('../fonts/cinzel-regular-bold.svg') format('svg');
     font-weight: 400;
     font-style: normal;
 }

Answer 1

首先，您在 CSS 中使用了太多无效的定位规则。您不需要手动添加那些左、上和右位置，只是为了将链接放在适当的位置。

您可能希望将菜单包装在容器中，将其与具有 float 属性的 Logo 一起放置。

此示例可能会给您一个更好的主意:

.container {
  width: 80%;
  margin: 0 auto;
  overflow: hidden;
}
.wrap-menu {
  display: inline-block;
  float: right;
}

#HeaderContainer a {
  display: inline-block;
  float: left;
}
#HeaderContainer a > div,
#title{
  right: auto !important; /* only to overwrite your hosted css */
  top: auto !important; /* only to overwrite your hosted css */
  left: auto !important; /* only to overwrite your hosted css */
}
#title{
  display: inline-block;
  float: left;  
}

/* Only for previews */
body,
#PictureContainer-top,
#HeaderContainer{
  min-width: 1200px;
}

.container{
  min-width: 1024px;  
}

<link href="http://test.crows-perch.com/css/main.css" rel="stylesheet" />
<div id="page">
  <div id="TopLinks">
    <div id="Links">
      <a href="">Game Media |</a>
      <a href="">Our Team |</a>
      <a href="">The Spiral |</a>
      <a href="">Sign in/Join</a>
    </div>
  </div>
  <div id="HeaderContainer">
    <div class="container">
      <div id="title">
        <a href="/">
          <img src="http://test.crows-perch.com/images/title_g-u5076.png" alt="">
        </a>
      </div>
      <div class="wrap-menu">
        <a href="/" class="Home">
          <div id="Home">
            <div id="HomeT">HOME</div>
          </div>
        </a>
        <a href="/" class="Guides">
          <div id="Guides">
            <div id="GuidesT">GUIDES</div>
          </div>
        </a>
        <a href="/" class="Forum">
          <div id="Forum">
            <div id="ForumT">FORUM</div>
          </div>
        </a>
        <a href="/" class="Blog">
          <div id="Blog">
            <div id="BlogT">BLOG</div>
          </div>
        </a>
        <a href="/" class="Guilds">
          <div id="Guilds">
            <div id="GuildsT">GUILDS</div>
          </div>
        </a>
        <a href="/" class="Play">
          <div id="Play">
            <div id="PlayT">PLAY NOW</div>
          </div>
        </a>
      </div>
    </div>
  </div>
  <div id="Top-Gradient">
  </div>
  <div id="PictureContainer-top">
  </div>
</div>