Question

我大约一年前创建了一个网站，现在需要在主导航栏中添加一个简单的下拉菜单。我正在尝试将此stackoverflow解决方案合并到我的网站中：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 ----*/

CSS下拉菜单 - 与现有站点集成的问题

1 个答案: