css - 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; }

どんな助けでも大歓迎です！

ありがとう、

シンシア