CSS下拉菜單 - 與現有網站集成的問題

Question

我在大約一年前創建了一個網站，現在需要在主導航欄中添加一個簡單的下拉菜單。我正在嘗試將此計算器解決方案合併到我的網站中：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> 

任何幫助，您可以提供關於如何把代碼將不勝感激。

在此先感謝，鮑勃

Answer 1

試試這個：

/*---- NAVIGATION ----*/ 
#nav { 
    width: 1027px; 
    height: 64px; 
    margin: 0; 
    padding: 0; 
} 
.center { 
    width:923px; 
    margin-left: auto; 
    margin-right:auto; 
} 
#nav ul { 
    display: block; 
} 
#nav li, #nav a { 
    display: block; 
    height: 59px; 
    padding-top: 3px; 
} 
#nav li { 
    float:left; 
    list-style: none; 
    display: inline-block; 
} 
#nav ul li ul { 
    display: none; 
} 
#nav ul li:hover ul { 
    display: block; 
    position: relative; 
    left: 20px; 
    top: 0px; 
} 
#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 ----*/