約 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>
コードを配置する方法について提供できるヘルプは大歓迎です。
前もってありがとう、ボブ