0

私が何を間違えたのか理解できません...

http://tacticaloffense.com/indexNew.php

ここに私のHTMLがあります:

  <div id="headerTopNav">
    <ul id="topNav">
      <li id="home"><a href="index.php" class="home">Home</a></li>
      <li id="about"><a href="about.php" class="about">About</a></li>
      <li id="products"><a href="shop/index.php" class="products">Products</a></li>
      <li id="wpNews"><a href="news/index.php" class="wpNews">News</a></li>
      <li id="contact"><a href="contact.php" class="contact">Contact</a></li>
    </ul>
  </div>

これが私のCSSです：

#headerTopNav {
    position:absolute;
    top:11px;
    left:520px;
    height:30px;
}
#topNav {
    height:30px;
    padding:0;
    margin:0;
    display:inline;
}
#topNav li {
    list-style:none;
    display:inline;
}
#topNav li:after {
    border-right:1px solid #063d04;
}
#topNav li:last-child {
    border:none;
}
#topNav a {
    background:url(../img/nav/nav_map.png);
    display:inline-block;
    height:30px;
    text-indent:-9000px;
}
#topNav a.home,
#topNav a.about,
#topNav a.products,
#topNav a.wpNews,
#topNav a.contact {
    height:30px;
}
#topNav li#home, #topNav a.home {
    width:77px;
}
#topNav li#about, #topNav a.about {
    width:102px;
}
#topNav li#products, #topNav a.products {
    width:99px;
}
#topNav li#wpNews, #topNav a.wpNews {
    width:72px;
}
#topNav li#contact, #topNav a.contact {
    width:92px;
}

#topNav a.home:link, #topNav a.home:visited {
    background:url(../img/nav/nav_map.png) no-repeat -246px 0px;
}
#topNav a.home:hover {
    background:url(../img/nav/nav_map.png) no-repeat -246px -30px;
}
#topNav a.about:link, #topNav a.about:visited {
    background:url(../img/nav/nav_map.png) no-repeat 0px 0px;
}
#topNav a.about:hover {
    background:url(../img/nav/nav_map.png) no-repeat 0px -30px;
}
#topNav a.products:link, #topNav a.products:visited {
    background:url(../img/nav/nav_map.png) no-repeat -570px 0px;
}
#topNav a.products:hover {
    background:url(../img/nav/nav_map.png) no-repeat -570px -30px;
}
#topNav a.wpNews:link, #topNav a.wpNews:visited {
    background:url(../img/nav/nav_map.png) no-repeat -447px -60px;
}
#topNav a.wpNews:hover {
    background:url(../img/nav/nav_map.png) no-repeat -447px -90px;
}
#topNav a.contact:link, #topNav a.contact:visited {
    background:url(../img/nav/nav_map.png) no-repeat -140px -60px;
}
#topNav a.contact:hover {
    background:url(../img/nav/nav_map.png) no-repeat -140px -90px;
}

誰でもこれを手伝ってもらえますか？リンクごとに画像が表示され、それぞれにカーソルを合わせると別の画像が表示されるように、画像を使用して水平ナビゲーションメニューを作成しようとしています。画像は全部で10枚。

4

2 に答える 2

0

インラインをulクラスに入れます。また、li 要素に幅を適用する必要があります。

于 2012-11-28T21:20:51.387 に答える
0

#logoメニューをカバーするのはあなたです。ロゴまたはz-indexメニューに幅を適用します。以下のいずれかで問題が解決します。

これのどちらか

#logo {
  padding-left: 45px;
  padding-top: 21px;
  position: relative;
  width: 360px;
}

またはこれ

#topNav {
  display: inline;
  height: 30px;
  margin: 0;
  padding: 0;
  position: relative;
  z-index: 100;
}
于 2012-11-29T19:07:21.960 に答える