如何使用 bootstrap 为 <li> 创建下拉菜单

Question

我需要为一个

<li>

元素制作下拉菜单

<div class="head-nav">
                <span class="menu"></span>
                <ul class="cl-effect-15">
                    <li><a href="index.php" data-hover="HOME">HOME</a></li>
                    <li><a href="about.php">ABOUT</a></li>
                    <li><a href="contact.php" data-hover="CONTACT">CONTACT</a></li>
                    <li><a href="#" data-hover=" "> </a></li>
                    <li><a href="3" data-hover=" "> </a></li>
                    <li class="pull-right"><a href="#" data-hover="More option" tabindex="-1">More options</a>
                            <ul class="dropdown-menu">
                                <li><a href="#" data-hover=" ">one</a></li>
                                <li><a href="3" data-hover=" ">two</a></li>
                            </ul>
                    </li>
                    <li class="pull-right"><a href="logout.php" data-hover="logout">logout</a></li>
                    <div class="clearfix"> </div>
                </ul>
            </div>

但子菜单未打开

使用

Bootstrap v3.1.1

注意：即使在

jquery

之后添加也不起作用

Answer 1

你必须使用

<li class="dropdown">
   <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">Dropdown <span class="caret"></span></a>
    <ul class="dropdown-menu" role="menu">
       <li><a href="#">Action</a></li>
       <li><a href="#">Another action</a></li>
       <li><a href="#">Something else here</a></li>
       <li class="divider"></li>
       <li><a href="#">Separated link</a></li>
       <li class="divider"></li>
       <li><a href="#">One more separated link</a></li>
    </ul>
</li>

在您的代码中，您错过了 li 标签的“dropdown”类。 为了正确的下拉菜单，你必须使用这个语法：

<li class="dropdown">
 <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">Item Dropdown <span class="caret"></span></a>
  <ul class="dropdown-menu" role="menu">
<!--- Put your menu-item here -->
  </ul>
</li>

您可以参考 Bootstrap 文档这里

该问题是由于标签 a

 中缺少 

data-toggle="dropdown"

引起的

Answer 2

也许您搜索这个解决方案：JSBin

例如： 您需要添加内容：attr(data-hover);在你的 before 元素上。 HTML：

<li class="HOVER"><a href="#" data-hover="More option" tabindex="-1">More options</a>

CSS：

.HOVER {
  border: solid 7px #000;
  padding: 20px;
  text-transform: uppercase;
  font-weight: bold;
  color: #fff;
  position: relative;
  width: 300px;
}

.HOVER:hover a:before {
  content: attr(data-hover);
  color: red;
  display: block;
  background: #000;
  position: absolute;
  top: 100%;
  left: -7px;
  right: -7px;
  padding: 15px; 
}

Answer 3

您缺少以下属性：

class="dropdown-toggle" data-toggle="dropdown"

这些属性位于您想要成为下拉列表“挂钩”的元素上。

下面的示例标记：

 <li class="dropdown">
                <a href="#lala" class="dropdown-toggle" data-toggle="dropdown" >
                   Java 
                   <b class="caret"></b>
                </a>
                <ul class="dropdown-menu" role="listbox">
                   <li><a href="#lala1" role="option">jmeter</a></li>
                   <li><a href="#lala2" role="option">EJB</a></li>
                   <li><a href="#lala3" role="option">Jasper Report</a></li>
                   <li class="divider"></li>
                   <li><a href="#" role="option">Separated link</a></li>
                   <li class="divider"></li>
                   <li><a href="#" role="option">One more separated link</a></li>
                </ul>
             </li>

编辑

这是一个例子Fiddle；请注意，如果删除

data-toggle="dropdown"

，代码将无法工作。 :)

Answer 4

要显示下拉列表，您只需将下拉容器设置为默认隐藏，并使用 CSS ':hover' 伪类在悬停时显示容器，如下所示：

<li class="dropdown " id="myMenuList">
<a href="#lala" class="dropdown-toggle" data-bs-toggle='dropdown'>
    Account
    <b class="caret"></b>
</a>
<ul class="dropdown-menu" role="listbox" id="myDropdowns">
    <li><a href="#lala1" role="option">jmeter</a></li>
    <li><a href="#lala2" role="option">EJB</a></li>
    <li><a href="#lala3" role="option">Jasper Report</a></li>
    <li class="divider"></li>
    <li><a href="#" role="option">Separated link</a></li>
    <li class="divider"></li>
    <li><a href="#" role="option">One more separated link</a></li>
</ul>
</li>

这是CSS

#myDropdowns {
display: none;
}
#myMenuList:hover #myDropdowns {
display: block;}