0

我的问题是，当我在移动设备上查看该网站时，我看不到子菜单。

例如：我点击“Alaplap”菜单，然后它显示子菜单，“Intel alaplap”和“amd alaplap”。但是“Intel alaplap”也有一个子菜单，我在移动设备上看不到。

<ul class="nav nav-justified">
    <li><a href="https://projektar.hu/kategoria/4/alaplap" class="dropdown-toggle" data-toggle="dropdown">Alaplap<b class="caret"></b></a>
<ul class="dropdown-menu">
    <li class="dropdown-submenu"><a href="https://projektar.hu/kategoria/74/alaplap/intel-alaplap" class="dropdown-toggle" data-toggle="dropdown">Intel alaplap</a>
<ul class="dropdown-menu">
    <li class="dropdown-submenu"><a href="https://projektar.hu/kategoria/83/alaplap/intel-alaplap/asus-alaplap" class="dropdown-toggle" data-toggle="dropdown">Asus alaplap</a>
<ul class="dropdown-menu">
    <li><a href="https://projektar.hu/kategoria/86/alaplap/intel-alaplap/asus-alaplap/asus-z370-alaplap">Asus Z370 alaplap</a></li>
    <li class="dropdown-submenu"><a href="https://projektar.hu/kategoria/87/alaplap/intel-alaplap/asus-alaplap/asus-z390-express-alaplap" class="dropdown-toggle" data-toggle="dropdown">Asus Z390 Express alaplap</a>
<ul class="dropdown-menu">
    <li><a href="https://projektar.hu/kategoria/88/alaplap/intel-alaplap/asus-alaplap/asus-z390-express-alaplap/aaa">aaaaa</a></li>
    <li><a href="https://projektar.hu/kategoria/89/alaplap/intel-alaplap/asus-alaplap/asus-z390-express-alaplap/bbb">bbbb</a></li>
</ul>
</li>    
</ul>
</li>
    <li><a href="https://projektar.hu/kategoria/84/alaplap/intel-alaplap/msi-alaplap">MSI alaplap</a></li>
    <li><a href="https://projektar.hu/kategoria/85/alaplap/intel-alaplap/gigabyte-alaplap">Gigabyte alaplap</a></li>
</ul>
</li>
    <li><a href="https://projektar.hu/kategoria/75/alaplap/amd-alaplap">AMD alaplap</a></li>
</ul>
</li>
    <li><a href="https://projektar.hu/kategoria/73/ssd-meghajto">SSD meghajtó</a></li>
    <li><a href="https://projektar.hu/kategoria/76/videokartya">Videókártya</a></li>
    <li><a href="https://projektar.hu/kategoria/77/memoria">Memória</a></li>
    <li><a href="https://projektar.hu/kategoria/78/tapegyseg">Tápegység</a></li>
    <li><a href="https://projektar.hu/kategoria/79/merevlemez">Merevlemez</a></li>
    <li><a href="https://projektar.hu/kategoria/80/monitor">Monitor</a></li>
    <li><a href="https://projektar.hu/kategoria/81/telefontok" class="dropdown-toggle" data-toggle="dropdown">Telefontok<b class="caret"></b></a>
<ul class="dropdown-menu">
    <li><a href="https://projektar.hu/kategoria/82/telefontok/samsung-telefontok">Samsung telefontok</a></li>
</ul>
</li>
</ul>

您可以在这里查看我的演示站点：我的演示站点

4

1 回答 1

0

发生这种情况是因为您的网站在切换到响应式视图时仍然以水平方向显示它们，这总是会导致移动设备上的用户体验不佳。 这就是我自己的处理方式。如果这有帮助，请随时感谢 Ricard Torres。

.dropdown-submenu {
  position: relative;
}
.dropdown-submenu > .dropdown-menu {
  top: 0;
  left: 100%;
  margin-top: -6px;
  margin-left: -1px;
}
.dropdown-submenu:hover > .dropdown-menu {
  display: block;
}
.dropdown-submenu:hover > a:after {
  border-left-color: #fff;
}
.dropdown-submenu.pull-left {
  float: none;
}
.dropdown-submenu.pull-left > .dropdown-menu {
  left: -100%;
  margin-left: 10px;
}

这是为您的菜单提供动力的实际 html...请随时相应地更改 css。

<nav class="navbar navbar-default" role="navigation">
    <div class="container-fluid">

        <!-- Brand and toggle get grouped for better mobile display -->
        <div class="navbar-header">
          <button type="button" class="navbar-toggle collapsed" 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 class="navbar-brand" href="#">Brand</a>
        </div>

        <!-- Collect the nav links, forms, and other content for toggling -->
        <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
          <ul class="nav navbar-nav">
            <li class="active"><a href="#">Link <span class="sr-only">(current)</span></a></li>
            <li><a href="#">Link</a></li>           
            <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="#">Link</a></li>
                <li class="dropdown-submenu">
                    <a tabindex="-1" href="#">Second Level Menu ! <i class="fa fa-chevron-right"></i></a>
                    <ul class="dropdown-menu">
                      <li><a tabindex="-1" href="#">Link 1</a></li>                           
                      <li><a href="#">Lik 2</a></li>
                      <li><a href="#">Link 3</a></li>
                    </ul>
                </li>                       
                <li><a href="#">Link</a></li>
                <li><a href="#">Link</a></li>
              </ul>
            </li> <!-- .dropdown -->                        
          </ul> <!-- .nav .navbar-nav -->        
        </div><!-- /.navbar-collapse -->

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

Codepen 解决方案以查看它的工作原理

于 2018-11-10T13:30:13.540 回答