html - 整页下拉菜单

Question

我想像 mytnra 一样制作整页下拉菜单。问题是我想要水平放置所有内容，但我得到的是垂直放置的所有内容，并且无法弄清楚如何使用 css 来做到这一点。

我想做类似 的东西

这是我的代码:

<nav class="navbar navbar-default navbar-fixed-top">
  <div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
    <div class="navbar-header page-scroll">
  <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
    <span class="sr-only">Toggle navigation</span>
    <span class="icon-bar"></span>
    <span class="icon-bar"></span>
    <span class="icon-bar"></span>
  </button>

  <a href="/"><img class="navbar-brand page-scroll" /></a>
</div>




<!-- Collect the nav links, forms, and other content for toggling -->

<div class="collapse navbar-collapse row" id="bs-example-navbar-collapse-1">


  <ul class="nav navbar-nav ">
    <li class="dropdown">
      <a href="#" class="dropdown-toggle" data-toggle="dropdown"><strong>All categories</strong> <b class="caret"></b></a>
      <ul class="dropdown-menu multi-level scrollable-menu">
        <li style="white-space:nowrap;">
          CBSE
        </li>

        <li>
          <li>Class 9th</li>
          <li>Class 9th</li>
          <li>Class 9th</li>
          <li>Class 9th</li>
          <li>Class 9th</li>
          <li>Class 9th</li>

        </li>

        <li>
          CBSE
        </li>

        <li>
          <li>Class 9th</li>
          <li>Class 9th</li>
          <li>Class 9th</li>
          <li>Class 9th</li>
          <li>Class 9th</li>
          <li>Class 9th</li>

        </li>


      </ul>


    </li>
  </ul>
  <!--  
      <li class="dropdown-submenu">
            <a tabindex="-1" href="#">Hover me for more options</a>
            <ul class="dropdown-menu">
              <li><a tabindex="-1" href="#">Second level</a></li>
              <li class="dropdown-submenu">
                <a href="#">Even More..</a>
                <ul class="dropdown-menu">
                    <li><a href="#">3rd level</a></li>
                    <li><a href="#">3rd level</a></li>
                </ul>
              </li>
              <li><a href="#">Second level</a></li>
              <li><a href="#">Second level</a></li>
            </ul>
          </li>
      <a href="#" ><li >fjdndisjfndjnfkn</li></a>

      <li>
          <li>Class 9th</li>
          <li>Class 9th</li>
          <li>Class 9th</li>
          <li>Class 9th</li>
          <li>Class 9th</li>
          <li>Class 9th</li>

      </li>
      <ul c>
      <a href="#"><li>Class 9th</li></a>

      </ul>
      </ul>
         </li>



            <li >
                <a  href="/"><strong>Home</strong></a>
            </li>

            <li >
                <a  href="http://www.blog.edgrab.com" target="_blank"><strong>Blog</strong></a>
            </li>
                <?php
                if(isset($_SESSION['user_data']))
                {
                    ?>
             <li >
            <div class="dropdown" style="margin-top: 12px;cursor: pointer;">

                <p class="dropdown-toggle" data-toggle = "dropdown" ><strong><span  ><?php echo $_SESSION['user_data']['first_name'];?></span></strong></strong><span class="caret"></span></p>
                <ul class="dropdown-menu">
                    <li><a href="/a/logout.php">Log out</a></li>
                </ul>

           </div>
            </li>
            <?php
                }
                    elseif(isset($_SESSION['logged_in']))
                {
                    ?>
             <li >
            <div class="dropdown" style="margin-top: 12px;cursor: pointer;">

                <p class="dropdown-toggle" data-toggle = "dropdown" ><strong><span  ><?php echo $_SESSION['first_name'];?></span></strong></strong><span class="caret"></span></p>
                <ul class="dropdown-menu">
                    <li><a href="/a/logout.php">Log out</a></li>
                </ul>

           </div>
            </li>
            <?php
                }
                else
                {
                    //do nothing
                }
            ?>



        </ul>
 -->
  <form action="/search.php" class="navbar-form " role="search" method="GET">
    <div class="input-group" style="">
      <input type="hidden" name="mode" value="content_type">
      <input type="text" id="search" name="query" class="form-control search" placeholder="Search notes, solutions, books and more..." name="q" />
      <i class="fa fa-search" style="margin-top:-25px;"></i>

    </div>
  </form>
  <!-- /.navbar-collapse
</div>
</div>

<!-- /.container-fluid -->
</nav>

还有一个工作 fiddle : https://jsfiddle.net/xgcbxh7L/3/

Answer 1

重构

下拉元素。将
• 元素与标题
• 一起分组到
  元素中，并添加样式属性 display: inline-block。 它最终看起来像:

  <li style="display: inline-block;">
      CBSE
      <ul>
          <li>Class 9th</li>
          <li>Class 9th</li>
          <li>Class 9th</li>
          <li>Class 9th</li>
          <li>Class 9th</li>
          <li>Class 9th</li>
      </ul>
  </li>
  

  工作示例 - https://jsfiddle.net/g6nyqfsr/1/