Question

我需要帮助才能使这个下拉列表工作。当我点击＆＃34;程序＆＃34;菜单，它应显示下拉子菜单。我在其中加入了一些代码，但它不起作用。顺便说一下，我正在使用bootstrap框架。

＆＃13;

#sidebar-wrapper{
    z-index:  1;
    position: absolute;
    width:  230px;
    height:  100%;
    overflow-y:  hidden;
    background: #2b6698;
    opacity: 0.9;
}

#sidebar-wrapper h2{
    color: white;
    padding-left: 30px;
}

.sidebar-nav{
    padding:  0;
    list-style: none;
    margin-top: 30px;
}

.sidebar-nav li{
    text-indent: 13px;
    line-height: 40px;
    border-bottom:1px solid rgba(255,255,255,0.05);
}

.sidebar-nav li a::after{

    font-family: FontAwesome;
    content:  '\f0d7';
    float: right;
    padding-right: 20px;

}

.sidebar-nav li a{
    display:  block;
    text-decoration: none;
    color:  #FFF;
    padding: 5px 0 5px 0px;
    font-size:13px;
    outline:none;
}

.sidebar-nav li a:hover{
    background: #1F496C;
}

.sidebar-nav > .active{
     background: #1F496C;
}

＆＃13;

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<div id="sidebar-wrapper">
    <h2> Dashboard </h2>
        <ul class="sidebar-nav dropdown">
            <li class="active"><a href="#" class="dropdown-toggle" data-toggle="dropdown"><i class="fa fa-user fa-lg move"></i>Program</a></li>
              <ul class="dropdown-menu">
                <li><a href="#">HTML</a></li>
                <li><a href="#">CSS</a></li>
                <li><a href="#">JavaScript</a></li>
              </ul>
            <li><a href="#"><i class="fa fa-sticky-note fa-lg move"></i>Logic</a></li>
        </ul>
    </div>

＆＃13;

Answer 1

你必须改变你的html一点，并且必须添加bootstrap js文件 - https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js

- 下面是html -

<div id="sidebar-wrapper">
    <h2> Dashboard </h2>
        <ul class="sidebar-nav dropdown">
            <li class="active"><a href="#" class="dropdown-toggle" data-toggle="dropdown"><i class="fa fa-user fa-lg move"></i>Program</a>
              <ul class="dropdown-menu">
                <li><a href="#">HTML</a></li>
                <li><a href="#">CSS</a></li>
                <li><a href="#">JavaScript</a></li>
              </ul></li>
            <li><a href="#"><i class="fa fa-sticky-note fa-lg move"></i>Logic</a></li>
        </ul>
    </div>

CSS

下面的css应该添加到你的css文件中。

#sidebar-wrapper .dropdown-menu {
     position: relative; 
     float:none;
     background-color:#1F496C;
}

这是一个工作小提琴：https://jsfiddle.net/rituagrawal01/1b8b8avs/

谢谢 - ：

Answer 2

看看这个......我用它并且它有效......

Multi-level Drop Down - Tryit Editor v3.5

Answer 3

解决此问题。你必须把li标签的ul嵌套。

<ul class="sidebar-nav dropdown">
  <li class="active">
    <a href="#" class="dropdown-toggle" data-toggle="dropdown">
       <i class="fa fa-user fa-lg move"></i>Program
    </a>
    <ul class="dropdown-menu">
       <li><a href="#">HTML</a></li>
       <li><a href="#">CSS</a></li>
       <li><a href="#">JavaScript</a></li>
    </ul>
  </li>
  <li><a href="#"><i class="fa fa-sticky-note fa-lg move"></i>Logic</a></li>
</ul>

Dropstown SubMenu在Bootstrap中不起作用

3 个答案:

- 下面是html -

CSS