html - 下拉在 JSFiddle 中工作但未出现在网站上

Question

我在 JSFiddle 中编写了一个下拉菜单(在 StackOverflow 用户的帮助下)，它现在按照我希望的方式工作:http://jsfiddle.net/RUMQP/ ).

问题是，出于某种原因，当我在我的实际网站中实现代码时，它不起作用。下拉列表不会出现 ( http://www.noellesnotes.com )。本来以为是Z-Index的问题，结果胡思乱想，问题依旧。

这是我的代码:

CSS:

ul.site-navigation {
    text-align: center;
    list-style: none;
}

ul.site-navigation li a{
    padding: 50px 0 47px 0;
    font-family: 'Arvo', serif, Georgia;
    width: 125px;
    float: left;
    letter-spacing: 4px;
    text-transform: uppercase;
    -o-transition:.5s;
    -ms-transition:.5s;
    -moz-transition:.5s;
    -webkit-transition:.5s;
    transition:.5s;
    color: rgb(82,82,82);
    border-bottom: 3px solid transparent;
}

ul.site-navigation > li {
    position: relative;
    width: 125px;
    float:left;
    margin: 0;
}

ul.site-navigation a:hover{
    font-weight: bold;
    border-bottom: 3px solid rgb(4,141,195);
    text-shadow: rgb(200, 200, 200) 1px 1px 0px;
    padding: 97px 0 0 0;
}

ul.site-navigation ul {
    list-style: none;
     height: 50px;
     left: 0;
     z-index: 1000;
    padding: 0;
    display: none;
}

ul.site-navigation ul li {
     float: none;
     line-height: 50px;
 }

ul.site-navigation ul li a {
     font-weight: regular;
     font-size: 20px;
 }

ul.site-navigation li:hover ul {
     display: block;
    position: absolute;
    width: 125px;
    top: 100%;
    left: 0;

}

HTML:

<ul class="site-navigation">
    <li><a href="/bio/">About</a></li>
    <li><a href="/portfolio/">Work</a>
        <ul>
            <li><a href="#">Testing</a></li>
        </ul>
    </li>
</ul>

如有任何帮助，我们将不胜感激!

Answer 1

您已经定义了包装器来隐藏内容溢出。要么让包装器在悬停时响应子菜单，要么删除 overflow: hidden; 属性。

.wrapper {
    width: 1000px;
    background-color: rgb(255,255,255);
    margin: 0 auto;
    /*overflow: hidden;*/
}