下拉菜单不会显示为基础5

Question

我一直在使用Foundation的下拉菜单，除了我的菜单没有显示。每次我将鼠标悬停在父链接上时，只有在我将鼠标悬停在菜单所在的区域后才会显示下拉菜单。有什么想法吗？

JS小提琴：http://jsfiddle.net/hHP4q/

HTML：

<nav class="top-bar" data-topbar id="nav-bar">
        <ul class="left">
            <li class="nodrop"><a href="#">home</a></li>

        <li class="has-dropdown">
            <a href="#">SAT I</a>

            <ul class="dropdown">
                <li class="drop"><a href="#">Score a Test</a></li>

                <li class="drop"><a href="#">Past Tests</a></li>
            </ul>
        </li>

        <li><a href="#">SAT II</a></li>
    </ul>
</nav>

CSS：

.top-bar {
    width: 768px;
    margin: 0 auto;
    padding: 0;
    height: 50px;
    background-color: #518c52;
}

/* line 42, ../scss/styles.scss */
.top-bar ul {
    line-height: 50px;
    height: 50px;
}

/* line 45, ../scss/styles.scss */
.top-bar ul li {
    display: inline-block;
    float: left;
    width: 75px;
    transition: background-color 1s;
    -webkit-transition: background-color 1s;
    text-align: center;
    height: 50px;
}

/* line 53, ../scss/styles.scss */
.top-bar ul li a {
    font-size: 18px;
    color: #FFF;
}

/* line 58, ../scss/styles.scss */
.top-bar ul li:hover {
    height: 50px;
    background-color: #3e713f;
}

/* line 62, ../scss/styles.scss */
.top-bar ul .dropdown {
    width: 100px;
    margin: 0;
    padding: 0;
}

/* line 67, ../scss/styles.scss */
.top-bar ul .drop {
    width: 100px;
    margin: 0;
    padding: 0;
}

Answer 1

的 DEMO

我所做的是隐藏ul类li＆amp; .dropdown内的.top-bar { width: 768px; margin: 0 auto; padding: 0; height: 50px; background-color: #518c52; } /* line 42, ../scss/styles.scss */ .top-bar ul { line-height: 50px; height: 50px; } /* line 45, ../scss/styles.scss */ .top-bar ul li { display: inline-block; float: left; width: 75px; transition: background-color 1s; -webkit-transition: background-color 1s; text-align: center; height: 50px; background-color: #518c52; } .top-bar ul li.has-dropdown ul { display:none; } .top-bar ul li.has-dropdown:hover ul { display:block; } /* line 53, ../scss/styles.scss */ .top-bar ul li a { font-size: 18px; color: #FFF; } /* line 58, ../scss/styles.scss */ .top-bar ul li:hover { height: 50px; background-color: #3e713f; } /* line 62, ../scss/styles.scss */ .top-bar ul .dropdown { width: 100px; margin: 0; padding: 0; } /* line 67, ../scss/styles.scss */ .top-bar ul .drop { width: 100px; margin: 0; padding: 0; } 在悬停时显示它。

CSS：

{{1}}