css - 侧边栏中的下拉子菜单不会下降

Question

所以我正在尝试创建一个带有下拉子菜单的侧边栏，已经三天了，我仍然无法确定是什么导致了我的下拉子菜单出现故障。有人可以这么好心地纠正我的代码吗？ (对不起，一团糟。我的大脑现在就像那个自动取款机。)

问题是我想在侧边栏中创建一个下拉子菜单，但下拉子菜单没有下降。它没有下拉列表，而是给出了一个列表。参见 this fiddle ，或下面的片段。

#wrapper {
    padding-left: 0;
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    transition: all 0.5s ease;
}

#wrapper.toggled {
    padding-left: 250px;
}

#sidebar-wrapper {
    z-index: 1000;
    position: fixed;
    left: 250px;
    width: 0;
    height: 100%;
    margin-left: -250px;
    overflow-y: auto;
    overflow-x:hidden;
    background: #000;
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    transition: all 0.5s ease;
}

#wrapper.toggled #sidebar-wrapper {
    width: 250px;
}

#page-content-wrapper {
    width: 100%;
    padding: 15px;
}

#wrapper.toggled #page-content-wrapper {
    position: absolute;
    margin-right: -250px;
}

/* Sidebar Styles */

.sidebar-nav {
    position: absolute;
    top: 0;
    width: 250px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.sidebar-nav li {
    text-indent: 20px;
    line-height: 40px;
}

.sidebar-nav li a {
    display: block;
    text-decoration: none;
    color: #999999;
}

.sidebar-nav li a:hover {
    text-decoration: none;
    color: #fff;
    background: rgba(255,255,255,0.2);
}

.sidebar-nav li a:active,
.sidebar-nav li a:focus {
    text-decoration: none;
}

.sidebar-nav > .sidebar-brand {
    height: 65px;
    font-size: 18px;
    line-height: 60px;
}

.sidebar-nav > .sidebar-brand a {
    color: #999999;
}

.sidebar-nav > .sidebar-brand a:hover {
    color: #fff;
    background: none;
}

#cssmenu,
#cssmenu ul,
#cssmenu ul li,
#cssmenu ul li a {
  margin: 0;
  padding: 0;
  border: 0;
  list-style: none;
  line-height: 1;
  display: block;
  position: relative;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
#cssmenu {
  width: 200px;
  font-family: Helvetica, Arial, sans-serif;
  color: #ffffff;
}
#cssmenu ul ul {
  display: none;
}
.align-right {
  float: right;
}
#cssmenu > ul > li > a {
  padding: 15px 20px;
  border-left: 1px solid #49505a;
  border-right: 1px solid #49505a;
  border-top: 1px solid #49505a;
  cursor: pointer;
  z-index: 2;
  font-size: 14px;
  font-weight: bold;
  text-decoration: none;
  color: #ffffff;
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.35);
  background: #49505a;
  background: -webkit-linear-gradient(#49505a, #32373e);
  background: -moz-linear-gradient(#49505a, #32373e);
  background: -o-linear-gradient(#49505a, #32373e);
  background: -ms-linear-gradient(#49505a, #32373e);
  background: linear-gradient(#49505a, #32373e);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.15);
}
#cssmenu > ul > li > a:hover,
#cssmenu > ul > li.active > a,
#cssmenu > ul > li.open > a {
  color: #49505a;
  background: #424852;
  background: -webkit-linear-gradient(#32373e, #1992d1);
  background: -moz-linear-gradient(#32373e, #1992d1);
  background: -o-linear-gradient(#32373e, #1992d1);
  background: -ms-linear-gradient(#32373e, #1992d1);
  background: linear-gradient(#32373e, #1992d1);
}
#cssmenu > ul > li.open > a {
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.15), 0 1px 1px rgba(0, 0, 0, 0.15);
  border-bottom: 1px solid #49505a;
}
#cssmenu > ul > li:last-child > a,
#cssmenu > ul > li.last > a {
  border-bottom: 1px solid #49505a;
}
.holder {
  width: 0;
  height: 0;
  position: absolute;
  top: 0;
  right: 0;
}
.holder::after,
.holder::before {
  display: block;
  position: absolute;
  content: "";
  width: 6px;
  height: 6px;
  right: 20px;
  z-index: 10;
  -webkit-transform: rotate(-135deg);
  -moz-transform: rotate(-135deg);
  -ms-transform: rotate(-135deg);
  -o-transform: rotate(-135deg);
  transform: rotate(-135deg);
}
.holder::after {
  top: 17px;
  border-top: 2px solid #ffffff;
  border-left: 2px solid #ffffff;
}
#cssmenu > ul > li > a:hover > span::after,
#cssmenu > ul > li.active > a > span::after,
#cssmenu > ul > li.open > a > span::after {
  border-color: #eeeeee;
}
.holder::before {
  top: 18px;
  border-top: 2px solid;
  border-left: 2px solid;
  border-top-color: inherit;
  border-left-color: inherit;
}
#cssmenu ul ul li a {
  cursor: pointer;
  border-bottom: 1px solid #32373e;
  border-left: 1px solid #32373e;
  border-right: 1px solid #32373e;
  padding: 10px 20px;
  z-index: 1;
  text-decoration: none;
  font-size: 13px;
  color: #eeeeee;
  background: #49505a;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1);
}
#cssmenu ul ul li:hover > a,
#cssmenu ul ul li.open > a,
#cssmenu ul ul li.active > a {
  background: #424852;
  color: #ffffff;
}
#cssmenu ul ul li:first-child > a {
  box-shadow: none;
}
#cssmenu ul ul ul li:first-child > a {
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1);
}
#cssmenu ul ul ul li a {
  padding-left: 30px;
}
#cssmenu > ul > li > ul > li:last-child > a,
#cssmenu > ul > li > ul > li.last > a {
  border-bottom: 0;
}
#cssmenu > ul > li > ul > li.open:last-child > a,
#cssmenu > ul > li > ul > li.last.open > a {
  border-bottom: 1px solid #32373e;
}
#cssmenu > ul > li > ul > li.open:last-child > ul > li:last-child > a {
  border-bottom: 0;
}
#wrapper > #sidebar-wrapper > .sidebar-nav >  b#cssmenu ul ul li.has-sub > a::after {
  display: block;
  position: absolute;
  content: "";
  width: 5px;
  height: 5px;
  right: 20px;
  z-index: 10;
  top: 11.5px;
  border-top: 2px solid #eeeeee;
  border-left: 2px solid #eeeeee;
  -webkit-transform: rotate(-135deg);
  -moz-transform: rotate(-135deg);
  -ms-transform: rotate(-135deg);
  -o-transform: rotate(-135deg);
  transform: rotate(-135deg);
}
#cssmenu ul ul li.active > a::after,
#cssmenu ul ul li.open > a::after,
#cssmenu ul ul li > a:hover::after {
  border-color: #ffffff;
}


@media(min-width:768px) {
    #wrapper {
        padding-left: 186px;
    }

    #wrapper.toggled {
        padding-left: 0;
    }

    #sidebar-wrapper {
        width: 161px;
    }

    #wrapper.toggled #sidebar-wrapper {
        width: 0;
    }

    #page-content-wrapper {
        padding: 20px;
    }

    #wrapper.toggled #page-content-wrapper {
        position: relative;
        margin-right: 0;
    }
}

<body>
    <div id="wrapper">
        <!-- Sidebar -->
        <div id="sidebar-wrapper">
            <ul class="sidebar-nav">
                <li class="sidebar-brand"><a href="#">Lyfe Craft</a></li>
                <li><a href="#">Intro</a></li>
            <div id='cssmenu'>
                <ul>
                   <li class='active has-sub'><a href='#'><span>Gliders</span></a>
                       <ul>
                        <li class='has-sub'><a href='#'><span>Glider 1</span></a></li>
                         <li class='has-sub'><a href='#'><span>Glider 2</span></a></li>
                         <li class='has-sub'><a href='#'><span>Glider 3</span></a></li>
                         <li class='has-sub'><a href='#'><span>Glider 4</span></a></li>
                         <li class='has-sub'><a href='#'><span>Glider 5</span></a></li>
                         <li class='has-sub'><a href='#'><span>Glider 6</span></a></li>
                         
                      </ul>
                   </li>
                    <li class='active has-sub'><a href='#'><span>Cycles</span></a>
                      <ul>
                         <li class='has-sub'><a href='#'><span>Cycle 1 (12)</span></a></li>
                         <li class='has-sub'><a href='#'><span>Cycle 2 (12)</span></a></li>
                         <li class='has-sub'><a href='#'><span>Cycle 3 (24)</span></a></li>
                         <li class='has-sub'><a href='#'><span>Cycle 4 (36)</span></a></li>
                         <li class='has-sub'><a href='#'><span>Cycle 5 (42)</span></a></li>
                         <li class='has-sub'><a href='#'><span>Cycle 6 (60)</span></a></li>
                         <li class='has-sub'><a href='#'><span>Cycle 7 (84)</span></a></li>
                         <li class='has-sub'><a href='#'><span>Cycle 8 (144)</span></a></li>
                         <li class='has-sub'><a href='#'><span>Cycle 9 (582)</span></a></li>
                         <li class='has-sub'><a href='#'><span>Cycle 10 (3966)</span></a></li>
                        
                      </ul>
                   </li>
                </ul>
            </div>
                <li><a href="#">Boomerang</a></li>
                <li><a href="#">Deflect (Routing)</a></li>
                <li><a href="#">Logic (Interaction Gate)</a></li>
                <li><a href="#">Move</a></li>
                <li><a href="#">Fast and Slow</a></li>
                <li><a href="#">Capture and Emit</a></li>
                <li><a href="#">Delayed Release</a></li>
                <li><a href="#">Attraction</a></li>
                <li><a href="#">Order Out of Chaos</a></li>
                <li><a href="#">Structure and Decay</a></li>
                <li><a href="#">Big Bang (Entropy)</a></li>
                <li><a href="#">Strung Out</a></li>
                <li><a href="#">Octave</a></li>
                <li><a href="#">Harmonic Chaos</a></li>
            </ul>
    </div>
        <!-- /#sidebar-wrapper -->

        <!-- Page Content -->
        <div id="page-content-wrapper">
            <div class="container-fluid">
                <div class="row">
                    <div class="col-lg-12">
                    <div class="topbar">
                        <div id="topbarcontent">
                           <!--  </p><button class="bannerButtons" onclick="toggleRunning()">RUN/STOP</button>
                        <button class="bannerButtons" onclick="fastSlow()">FAST/SLOW</button>
                        <button class="bannerButtons" onclick="isRunning = true; mainLoop(); isRunning = false;">STEP</button>
                        <button class="bannerButtons" onclick="reverseDirection()">DIRECTION</button>
                        <button class="bannerButtons" onclick="randomCells(12, -2, 1)">RANDOM</button>
                        <button class="bannerButtons" onclick="playStopMusic()">MUSIC</button>
                        <button class="bannerButtons" onclick="toggleTrails()">TRAILS</button>
                        <button class="bannerButtons" onclick="clearGrid()">CLEAR</button>
                        <button class="bannerButtons" onclick="update()">UPDATE</button> -->
                         <button class="btn btn-inverse active"><i class="icon-music icon-white"></i> Run/Stop</button>
                        <button class="btn btn-inverse active"><i class="icon-music icon-white"></i> Fast/Slow</button>
                        <button class="btn btn-inverse active"><i class="icon-music icon-white"></i> Step</button>
                        <button class="btn btn-inverse active"><i class="icon-music icon-white"></i> Direction </button>
                        <button class="btn btn-inverse active"><i class="icon-music icon-white"></i> Random</button>
                        <button class="btn btn-inverse active"><i class="icon-music icon-white"></i> Music</button>
                        <button class="btn btn-inverse active"><i class="icon-music icon-white"></i> Trials</button>
                       <button class="btn btn-inverse active"><i class="icon-music icon-white"></i>Clear</button>
                        <button class="btn btn-inverse active"><i class="icon-music icon-white"></i> Update</button>

                       <div id="banner">
             <!--    <span style="background-color: #fff; opacity:0.5; border-bottom: 1px solid #ddd; padding: 8px 10px; font-size:medium"> -->
                    <b>click & drag to rotate view | scroll to zoom | arrows move cursor; U & D for up/down | ENTER to create/delete | S to step</b>
                </span>
                
                <a href="faq.html" target="_blank" style="font-size:larger">faq</a>
                
                <a href="https://github.com/danx0r/BusyBoxes" target="_blank" style="font-size:larger">source</a>

            </div>
        </div>

                        </div>
                    </div>
            
                       <!--  <h1>Simple Sidebar</h1>
                        <p>This template has a responsive menu toggling system. The menu will appear collapsed on smaller screens, and will appear non-collapsed on larger screens. When toggled using the button below, the menu will appear/disappear. On small screens, the page content will be pushed off canvas.</p>
                        <p>Make sure to keep all page content within the <code>#page-content-wrapper</code>.</p> -->
                        <a href="#menu-toggle" class="slider btn btn-default" id="menu-toggle">Toggle Menu</a>
                    
                    </div>
                </div>
            </div>
        </div>
        <!-- /#page-content-wrapper -->
    </div>
    <!-- /#wrapper -->

    <!-- jQuery -->
    <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>

    <!-- Bootstrap Core JavaScript -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

    <!-- Menu Toggle Script -->
    <script>
    $("#menu-toggle").click(function(e) {
        e.preventDefault();
        $("#wrapper").toggleClass("toggled");
    });
    </script>




</body>

</html>

Answer 1

我已经在你的 css 底部做了一些编辑:
(我不想重写所有的 css，因为里面有很多东西)

/* New Edits */
#cssmenu { 
   display: none; 
}
ul > li:hover > #cssmenu {
   display: block;
}
#cssmenu > ul > .has-sub:hover > ul {
   display: block;
}

但我真的认为你应该从头开始，也许通过一些教程。你的标记也有一些问题(我需要将整个 #cssmenu div 包装在列表项中以使其工作)，所以经过一些调整它现在似乎可以工作，这是 fiddle - http://jsfiddle.net/ym12ddjh/2/

希望这会减轻您 3 天的痛苦:)