为什么我的引导菜单看起来像下拉菜单

Question

这是我的菜单代码：

 <div class="menu classic">   
     <ul id="nav" class="menu">
         <li>
             <a href="index.html">HOME</a>
             <ul class="sub-menu">
                 <li><a href="home-ii.html">Home II</a></li>
                 <li><a href="home-iii.html">Home III</a></li>
                 <li><a href="home-iv.html">Home IV</a></li>
                 <li><a href="home-v.html">Home V</a></li>
                 <li><a href="home-vi.html">Home VI</a></li>
                 <li><a href="home-vii.html">Home VII</a></li>
                 <li><a href="home-viii.html">Home VIII</a></li>
                 <li><a href="home-ix.html">Home IX</a></li>
                 <li><a href="home-x.html">Home X</a></li>
                 <li><a href="landing-page.html">Landing page</a></li>

我不会简单的水平菜单吗？我怎么能达到这个目标？

Answer 1

试试这个

<nav class="nav-menu-container">
    <ul class="nav-menu sf-js-enabled sf-arrows" style="touch-action: pan-y;">
      <li class="menu-active"><a href="#hero">Home</a></li>
      <li class="menu-has-children"><a href="" class="sf-with-ul">Drop Down</a>
        <ul>
          <li><a href="#">Drop Down 1</a></li>
          <li class="menu-has-children"><a href="#" class="sf-with-ul">Drop Down 2</a>
            <ul>
              <li><a href="#">Deep Drop Down 1</a></li>
              <li><a href="#">Deep Drop Down 2</a></li>
              <li><a href="#">Deep Drop Down 3</a></li>
              <li><a href="#">Deep Drop Down 4</a></li>
              <li><a href="#">Deep Drop Down 5</a></li>
            </ul>
          </li>
          <li><a href="#">Drop Down 3</a></li>
          <li><a href="#">Drop Down 4</a></li>
          <li><a href="#">Drop Down 5</a></li>
        </ul>
      </li>
      <li><a href="#contact">Contact Us</a></li>
    </ul>
</nav>