Выпадающее меню не появляется Foundation 5

Question

Выпадающее меню не появляется Foundation 5

0

Я работал над выпадающим меню с Foundation, за исключением того, что мое меню не отображается. Каждый раз, когда я наводил указатель на родительскую ссылку, выпадающее меню появляется только после того, как я навешиваю область, где должно быть меню. Есть идеи?

JS Fiddle: 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;
}

Andrew 11 май 2014, в 10:07

Источник

0

включить фундамент topbar js .. Это приведено в документации ..
Lakshay 11 май 2014, в 07:34
0

@Lakshay, я включил в foundation.min.js, который по умолчанию имеет все файлы js
Andrew 11 май 2014, в 07:35

Теги:

html

zurb-foundation

css

drop-down-menu

1 ответ

Ещё вопросы

включить фундамент topbar js .. Это приведено в документации ..
@Lakshay, я включил в foundation.min.js, который по умолчанию имеет все файлы js

Imran Bughio · Accepted Answer · 2014-05-11T05-40-00.000Z

DEMO

То, что я сделал, это скрыть ul внутри .dropdown class li & показать его при наведении.

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;
    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;
}