0

約 1 年前に Web サイトを作成しましたが、メインのナビゲーション バーに簡単なドロップダウン メニューを追加する必要があります。このスタックオーバーフロー ソリューションを自分のサイトに取り入れようとしています: http://jsfiddle.net/EDy7X/ - CSS を貼り付けると、正しく表示されません。画面の下部に完全なメニューが表示されます。 . #navPrices ul li { のように貼り付けると、何も表示されません。

私は次のcssを持っています:

/*---- NAVIGATION ----*/
#nav{
    background-image:url(images/nav/nav-bar-bg.jpg);
    width: 1027px;
    height: 64px;
    margin: 0;
    padding: 0;
}

.center {
    width:923px;
    margin-left: auto;
    margin-right:auto;
}

#nav li, #nav a { 
    display: block; 
    height: 59px;   
    padding-top: 3px;
    overflow:hidden;
}

#nav li { 
    float:left;
    list-style: none; 
    display: inline;    
    text-indent: -9999em;   
}

#navHome { width: 106px; }
#navAbout { width: 104px; }
#navPrices { width: 181px; }
#navPrograms { width: 130px; }
#navBuy { width: 170px; }
#navLinks { width: 93px; }
#navContact { width: 139px; }

#navHome a { background: url(images/nav/btn-home.jpg) no-repeat; }
#navAbout a { background: url(images/nav/btn-about.jpg) no-repeat; }
#navPrices a { background: url(images/nav/btn-prices.jpg) no-repeat; }
#navPrograms a { background: url(images/nav/btn-programs.jpg) no-repeat; }
#navBuy a { background: url(images/nav/btn-buy.jpg) no-repeat; }
#navLinks a { background: url(images/nav/btn-links.jpg) no-repeat; }
#navContact a { background: url(images/nav/btn-contact.jpg) no-repeat; }

#navHome a:hover, #navHome a.current { background: url(images/nav/btn-home.jpg) 0 -59px no-repeat; }
#navAbout a:hover, #navAbout a.current { background: url(images/nav/btn-about.jpg) 0 -59px no-repeat; }
#navPrices a:hover, #navPrices a.current { background: url(images/nav/btn-prices.jpg) 0 -59px no-repeat; }
#navPrograms a:hover, #navPrograms a.current { background: url(images/nav/btn-programs.jpg) 0 -59px no-repeat; }
#navBuy a:hover, #navBuy a.current { background: url(images/nav/btn-buy.jpg) 0 -59px no-repeat; }
#navLinks a:hover, #navLinks a.current { background: url(images/nav/btn-links.jpg) 0 -59px no-repeat; }
#navContact a:hover, #navContact a.current { background: url(images/nav/btn-contact.jpg) 0 -59px no-repeat; }

/*---- /NAVIGATION ----*/

そして、次の HTML:

  <!-- NAVIGATION -->
  <div id="nav">
   <div class="center">
    <ul>
     <li id="navHome"><a href="#">Home</a></li>
     <li id="navAbout"><a href="#">About</a></li>
     <li id="navPrices"><a class="current" href="#">Market Price Reports</a>
      <ul>
       <li><a href="#">menu item 1</a></li>
       <li><a href="#">menu item 2</a></li>
      </ul>
     </li>
     <li id="navPrograms"><a href="#">Programs</a></li>
     <li id="navBuy"><a href="#">Buy/Sell/Trade</a></li>
     <li id="navLinks"><a href="#">Links</a></li>
     <li id="navContact"><a href="#">Contact Us</a></li>
   </ul>
   </div>
  </div>

コードを配置する方法について提供できるヘルプは大歓迎です。

前もってありがとう、ボブ

4

1 に答える 1