在我的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; 
} 

這樣做之後，看起來像那麼你將不得不修復下拉無序列表的位置，以及可能只是重新調整間距和事情，但我敢打賭，你可以處理。