Question

我正在尝试为Bulma的导航栏编写下拉菜单，但它现在似乎有问题，任何人都可以帮我找出原因吗？

<nav class="nav has-shadow">
    <div class="container">
        <div class="nav-left">
            <a class="navbar-item is-tab is-active" href="http://bulma.io/documentation/overview/start/">Home</a> <a class="navbar-item is-tab" href="http://bulma.io/documentation/overview/start/">Profile</a> <a class="navbar-item is-tab" href="http://bulma.io/documentation/overview/customize/">Education</a> <a class="navbar-item is-tab" href="http://bulma.io/documentation/overview/classes/">Skills</a> <a class="navbar-item is-tab" href="http://bulma.io/documentation/overview/modular/">Housing</a> <a class="navbar-item is-tab" href="http://bulma.io/documentation/overview/modular/">Activity</a>
            <div class="navbar-item has-dropdown is-hoverable" style="margin-left: auto; display: inline-flex;">
                <a class="navbar-link"><i class="fa fa-user"></i> &nbsp;&nbsp; Dave Fox</a>
                <div class="navbar-dropdown" style="left: initial; right: 0;">
                    <div class="navbar-item">
                        <div>
                            <small><a href="/account/language">Account Settings - Language</a></small>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</nav>

以下是我的JS文件：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://holorp.com/assets/bulma/0.5.0/js/bulma.js"></script>
<script src="https://holorp.com/assets/holorp/2.1/js/holorp.js"></script>

然后我只使用默认的Bulma CSS

Answer 1

你试过这个JavaScript吗？我用这个：

<!DOCTYPE html>
<html>
<head>
<style>
.dropdown {
    position: relative;
    display: inline-block;
}

.dropdown-content {
    display: none;
    position: absolute;
    background-color: #f9f9f9;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    padding: 12px 16px;
    z-index: 1;
}

.dropdown:hover .dropdown-content {
    display: block;
}
</style>
</head>
<body>

<h2>Hoverable Dropdown</h2>
<p>Hover your mouse below the text below</p>

<div class="dropdown">
  <span>Here!</span>
  <div class="dropdown-content">
    <p>Hello World!</p>
  </div>
</div>

</body>
</html>

CSS导航栏下拉列表无效？

1 个答案: