Vfrdtyky

My problem is, that when i am looking at the site on mobile, i cant see the submenus.

For example:
I click down the "Alaplap" menu, then it displays the submenu, "Intel alaplap" and "amd alaplap". But the "Intel alaplap" also has a submenu, and i cant see that on mobile.

<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>

You can take a look at my demo site at here: My demo site

This is happening because your site is still showing them in horizontal orientation when switching to responsive view which is always going to lead to a bad UX on mobile. This is how I would approach it myself. Feel fre to thank Ricard Torres if this was helpful.

.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;

}

and here is the actual html to power your menu...feel free to change the css accordingly.

<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 solution to see it working