CSS中的下拉菜单出现在页面内容下

Question

我已经对这个问题进行了数小时的研究，但无法使其发挥作用！我终于得到了我的CSS菜单，正是我想要的 - 耶！但现在它下降到网页上的其他内容下，我无法弄清楚如何让它出现在最前面。我调整了许多人提到的定位，并将z-index设置一直设置到2000，没有任何影响。我究竟做错了什么？？使用Firefox - 当前版本。

这里是CSS代码（没有，我没有一个链接显示例如，该网站尚未公布）

#cssmenu:before, #cssmenu:after, #cssmenu > ul:before, #cssmenu > ul:after { 

    content: ''; 
    display: table; 

} 


#cssmenu:after, #cssmenu > ul:after { 

    clear: both; 

} 
#cssmenu 
{ 
    zoom: 1; 
} 

#cssmenu > ul 
{ 
    background: #00305f; 
    margin: 0; 
    padding: 0; 
    position: relative; 
} 

#cssmenu > ul li 
{ 
    margin: 0; 
    padding: 0; 
    list-style: none; 

} 

#cssmenu > ul > li 
{ 
    float: left; 
    position: relative; 
} 

#cssmenu > ul > li > a 
{ 
    padding: 20px 25px; 
    display: block; 
    color: white; 
    font-family: Georgia, Times, Serif; 
    font-size: 20px; 
    text-transform: capitalize; 
    text-decoration: none; 
    text-shadow: 0 -1px 0 rgba(151, 99, 33, .43); 
    line-height: 18px; 
} 

#cssmenu > ul > li:hover > a 
{ 
    background: #5783af; 

} 

#cssmenu > ul > li > a > span 
{ 
    line-height: 18px; 
} 

#cssmenu > ul > li.active > a 
{ 
    background: #5783af; 
} 

#cssmenu > ul > li > a:active 
{ 
    background: #5783af; 
} 

#cssmenu > ul ul 
{ 
    opacity: 0; 
    visibility: hidden; 
    position: absolute; 
    top: 120px; 
    background: #00305f; 
    margin: 0; 
    padding: 0; 
    z-index: 2000; 
    -webkit-transition: all .35s .2s ease-in-out; 
    -moz-transition: all .35s .2s ease-in-out; 
    -ms-transition: all .35s .2s ease-in-out; 
    transition: all .35s .2s ease-in-out; 
} 

#cssmenu > ul li:hover ul 
{ 
    opacity: 1; 
    visibility: visible; 
    margin: 0; 
    color: #5783af; 
    z-index: 2000; 
    top: 64px; 
    left: 0; 
} 

#cssmenu > ul ul:before 
{ 
    content: ''; 
    position: absolute; 
    top: -10px; 
    width: 100%; 
    height: 16px; 
    background: transparent; 
} 

#cssmenu > ul ul li 
{ 
    list-style: none; 
    padding: 0; 
    margin: 0; 
    width: 100%; 
} 

#cssmenu > ul ul li a 
{ 
    padding: 12px 20px; 
    display: block; 
    color: white; 
    font-family: Georgia, Times, Serif; 
    font-size: 16px; 
    text-transform: capitalize; 
    text-decoration: none; 
    width: 175px; 
    border-left: 4px solid transparent; 
    -webkit-transition: all .35s ease-in-out; 
    -moz-transition: all .35s ease-in-out; 
    -ms-transition: all .35s ease-in-out; 
    transition: all .35s ease-in-out; 
    text-shadow: 0 -1px 0 rgba(151, 99, 33, .43); 
} 

#cssmenu > ul ul li a:hover 
{ 
    border-left: 4px solid #055988; 
    background: #5783af; 
} 

#cssmenu > ul ul li a:active 
{ 
    background: #5783af; 
} 

HTML代码：

<div id='cssmenu'> 
<ul> 
    <li class='has-sub'><a href='home.html'><span>Home</span></a> 
    <ul> 
     <li><a href='resources.html'><span>Resources</span></a></li> 
    <li><a href='products.html'><span>Products</span></a></li> 
    <li class='last'><a href='contact.html'><span>Contact Us</span></a></li> 
     </ul> 
    </li> 
    <li class='has-sub'><a href='health-wellness.html'><span>Health & Wellness</span></a> 
     <ul> 
     <li><a href='cooking-from-scratch.html'><span>Cooking From Scratch</span></a></li> 
     <li><a href='sustainable-gardening.html'><span>Sustainable Gardening</span></a></li> 
     <li><a href='csa.html'><span>Community Supported Agriculture</span></a></li> 
     <li><a href='fun-ways-to-exercise.html'><span>Fun Ways to Exercise</span></a></li> 
     <li><a href='pain-relief.html'><span>Natural Relief for Chronic Pain</span></a></li> 
     <li class='last'><a href='toxic-load.html'><span>Reducing Your Toxic 

Load</span></a></li> 
     </ul> 
    </li> 
    <li><a href='relationships.html'><span>Relationships</span></a></li> 
    <li><a href='wealth.html'><span>Wealth</span></a></li> 
    <li class='last'><a href='spirituality.html'><span>Spirituality</span></a></li> 
</ul> 
</div> 

Answer 1

尝试：

#cssmenu 
{ 
    zoom: 1; 
z-index:9999 !important; 
}