Question

我编写了一个下拉菜单（在StackOverflow用户的帮助下），现在按照我在JSFiddle中的方式工作：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;*/
}

Answer 2

在您的网站上，我在那里看不到此代码。

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

}

将它添加到您网站的CSS中，它应该可以解决您的问题。

下载在JSFiddle工作，但没有出现在网站上

2 个答案: