Twitter bootstrap 如何在bootstrap中创建下拉菜单

我正在用下拉菜单构建导航栏。这是我的密码：

我还想在将鼠标悬停在菜单上时打开列表

提前谢谢

<nav class="navbar navbar-inverse">
    <div class="container-fluid">

        @*Logo*@
        <div class="navbar-header">
            <a href="#" class="navbar-brand">Halo Dayi</a>
        </div>

        @*Menu İtems*@
        <div>
            <ul class="nav navbar-nav">
                <li class="active"><a href="#">Home</a></li>
                <li><a href="#">About</a></li>
                <li><a href="#">Contact</a></li>

                @*DropDown Menu*@
                <li class="dropdown">
                    <a href="#" class="dropdown-toggle" data-toggle="dropdown">My Profile <span class="caret"></span></a>
                    <ul class="dropdown-menu">
                        <li><a href="#">Friends</a></li>
                        <li><a href="#">Photos</a></li>
                        <li><a href="#">Setting</a></li>
                    </ul>
                </li>
            </ul>

        </div>



    </div>
</nav>

@*标志*@
@*菜单项*@




@*下拉菜单*@

将鼠标悬停在下拉菜单上时，使用css激活

/*下拉按钮*/
.dropbtn{
背景色：#4CAF50；
颜色：白色；
填充：16px；
字体大小：16px；
边界：无；
光标：指针；
}
/*容器-需要定位下拉内容*/
.下拉列表{
位置：相对位置；
显示：内联块；
}
/*下拉内容（默认情况下隐藏）*/
.下拉内容{
显示：无；
位置：绝对位置；
背景色：#f9f9f9；
最小宽度：160px；
盒影：0px 8px 16px 0px rgba（0,0,0,0.2）；
z指数：1；
}
/*下拉列表中的链接*/
.下拉内容a{
颜色：黑色；
填充：12px 16px；
文字装饰：无；
显示：块；
}
/*更改悬停时下拉链接的颜色*/
.下拉内容a:悬停{背景色：#f1f1}
/*悬停时显示下拉菜单*/
.下拉：悬停.下拉内容{
显示：块；
}
/*显示下拉内容时，更改下拉按钮的背景色*/
.dropdown:悬停.dropbtn{
背景色：#3e8e41；
}

下拉列表

摘自：

将下拉菜单的触发器和下拉菜单包装在.dropdown或另一个声明位置的元素：relative中

---

因此，您的标记是可以的，只需检查

是否有相对位置，或者将其包装成一个div。

谢谢您的回答，但我不明白我应该做什么。请把代码块给我看一下好吗？