Question

我试图让我的代码的这一部分只能使用CSS而不起作用，但是我在这里按照步骤http://www.w3schools.com/howto/howto_css_dropdown.asp进行了操作，但是我无法在我的代码中放置任何正确的代码，我要么是可以进行的，要么是使整个.list可以遏制但是.list不能悬停悬停

<nav class="navbar navbar-toggleable-md navbar-light">
            <div class="collapse navbar-collapse" id="navbarNavDropdown">
                <ul class="navbar-nav">
                    <li class="nav-item dropdown">
                        <a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
              Dropdown
            </a>
                        <div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
                            <div class="list">
                                <a class="dropdown-item" href="#">1</a>
                                <a class="dropdown-item" href="#">2</a>
                                <a class="dropdown-item" href="#">3</a>
                                <a class="dropdown-item" href="#">4</a>
                                <a class="dropdown-item" href="#">5</a>
                            </div>
                        </div>
                    </li>
                </ul>
            </div>
        </nav>

CSS（我自己尝试过的）

<style>
.dropdown-menu {
    visibility: hidden;
}

.dropdown-menu:hover > .list {
    visibility: visible;
}
</style>

Answer 1

    Sub WordGeneration()
    Dim listWords(4) As String
    listWords(0) = "juicy"
    listWords(1) = "aaron"
    listWords(2) = "power"
    listWords(3) = "weigh"
    listWords(4) = "public"
    'randomizes and picks a string from array to use
    Dim Rand As New Random()
    Dim Index As Integer = Rand.Next(0, listWords.Length - 1)

    Dim SelectedValue = listWords(Index)

这样可行，你忘了删除'＆gt;'从不允许css访问列表类的代码中，只需删除'＆gt;'从代码中可能会有效。

在CSS中，只要用'。'操作符编写类名，就可以定位另一个类中的任何类。

示例 - HTML代码：

.dropdown-menu:hovern .list {
    visibility: visible;
}

CSS代码：

<div class="A">
    <div class="B"></div>
</div>

这是您使用父类访问子类的方式。

Answer 2

这是一个奇怪的结构，但问题的核心在于你的目标是错误的类。

＆＃13;

.dropdown{
  display: block;
}

.dropdown-menu {
    display: none;
}

.dropdown:hover .dropdown-menu {
    display: block;
}

＆＃13;

<nav class="navbar navbar-toggleable-md navbar-light">
            <div class="collapse navbar-collapse" id="navbarNavDropdown">
                <ul class="navbar-nav">
                    <li class="nav-item dropdown">
                        <a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
              Dropdown
            
                        <div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
                            <div class="list">
                                <a class="dropdown-item" href="#">1</a>
                                <a class="dropdown-item" href="#">2</a>
                                <a class="dropdown-item" href="#">3</a>
                                <a class="dropdown-item" href="#">4</a>
                                <a class="dropdown-item" href="#">5</a>
                            </div>
                        </div>
                    </li>
                </ul>
            </div>
        </nav>

＆＃13;

仅使用CSS的Bootstrap Dropdown Hoverable下拉菜单

2 个答案: