我的 CSS 导航中的下拉菜单未显示在正确的位置

Question

我已经为我正在开发的这个 Joomla 网站创建了一个 CSS 下拉菜单（不使用插件），并且由于某种原因，子菜单出现在导航的左侧，无论其父项在哪里该子菜单恰好是。

http://digitaldemo.net/anova/

这是网站上显示的菜单的 HTML：

<div id="navbar">
<div id="nav">
<ul class="menu">
<li class="item-101 current active"><a href="/anova/" >Home</a></li>
<li class="item-107 deeper parent"><a href="/anova/index.php/about-the-book" >About The Book</a>
   <ul>
   <li class="item-118"><a href="/anova/index.php/about-the-book/contributors" >Contributors</a></li>
   <li class="item-119"><a href="/anova/index.php/about-the-book/reviews" >Reviews</a></li>   
   <li class="item-120"><a href="/anova/index.php/about-the-book/standards-and-stem" >Standards and STEM</a></li>
   <li class="item-137"><a href="#" >More Emphasis Conditions</a></li>
   </ul>
</li>
<li class="item-108 deeper parent"><a href="/anova/index.php/what-s-in-the-book" >What's In The Book?</a>
   <ul>
   <li class="item-121"><a href="/anova/index.php/what-s-in-the-book/content-summary" >Content Summary</a></li>
   <li class="item-122"><a href="/anova/index.php/what-s-in-the-book/how-to-use-this-book" >How to Use This Book</a></li>
   </ul>
</li>
<li class="item-109"><a href="/anova/index.php/buy-the-book" >Buy The Book</a></li>
<li class="item-110 deeper parent"><a href="/anova/index.php/what-is-the-rip" >What is the RIP®?</a>
   <ul>
   <li class="item-138"><a href="/anova/index.php/what-is-the-rip/uniqueness-philosophy" >Uniqueness &amp; Philosophy</a></li>
   </ul>
</li>
<li class="item-111"><a href="/anova/index.php/contact-us" >Contact Us</a></li>
</ul>
</div>
</div>

和 CSS

#nav {
    width:960px ;
    margin:auto ;
    text-align:center ;
}

#nav ul.menu {
  margin-left:0 ;
  padding-left:0 ;
  margin-top:-5px ;
  list-style-type:none ;
  text-align:center ;
  height:59px ;
}

#nav ul.menu li {
  display:inline ;
  background:transparent ;
  margin-left:40px ;
}

#nav .menu li a {
  display:inline-block ;
  height:59px ;
  font-size:18px ;
  color:#e8e8e8 ;
  border-top:5px solid #3157a7 ;
  line-height:54px ;
  position:relative ;
}

#nav .menu li a:hover, #nav .menu li.current a {
  background:url("../images/menu-arrow.png") no-repeat center ;
  border-top:5px solid #607cbc ;
  z-index:9999 ;
  position:relative ;
}


#nav .menu li:first-child {
  margin-left:0px !important ;
}

    .menu li ul { position:absolute ;
    top:54px ;
    width:220px ;
    float:none ;
    padding-left:0px ;
    background:#4d4d4d ;
    overflow:visible ;
    z-index:5 ;
    text-align:left ;
    margin-left:0px ;
    }

    .menu li li { display:none !important ;
    padding:0 ;
    margin:0 !important ;
    background:#4d4d4d ;
    border-left:none ;
    border-top:1px solid #616161 ;
    }

    .menu li li:first-child {
  border-top:0px !important ;
  }

    .menu li.current li a {
  background-image:none !important ;
}

    .menu li li a   { display:block ;
    background:#4d4d4d ; ;
    padding:5px 10px !important ;
    font-size:17px !important ;
    height:25px !important ;
    line-height:25px !important ;
    text-transform:none ;
    position:relative ;
    border-top:0px !important ;
    top:0px ;
    }

    .menu li li:first-child a    { border-top:none }

    .menu li li a:hover    { background:#808080 ;
    background-image:none !important ;
    }

    .menu li:hover li { float: none; display:block !important ; clear: both; }

任何帮助将不胜感激！

谢谢，

辛西娅

Answer 1

您需要使下拉列表相对于父列表项，因此您需要添加如下内容：

#nav ul.menu li {
    position:relative;
}

在这样做之后，看起来你将不得不修复下拉无序列表上的位置，并且可能只是重新调整间距和其他东西，但我打赌你可以处理。