Как поставить меню за другим, а не друг над другом

Question

У меня есть 3 меню в 3 разных местах на веб-сайте, которые они переводят в одно мобильное меню переключения на телефоне.

Моя проблема на мобильном телефоне: 3 меню отображаются на панели переключателей, но одно поверх другого, а не одно за другим.Я определяю, что это меню в моем html, используя .main-nav

. Я попытался снова добавить .main-nav, но это не работает, я попытался дать каждому меню верхнее поле в css, которое оно показывает, но вместе сего фон.

живой пример - вот как это работает на codepen https://codepen.io/anon/pen/VOeKpE

Я хочу, чтобы все 3 меню на сайте показывали ссылки одну за другой вместодруг над другом сейчас.

if ($('.main-nav').length) {
  var $mobile_nav = $('.main-nav').clone().prop({
    class: 'mobile-nav d-lg-none'
  });
  
  $('body').append($mobile_nav);
  $('body').prepend('<button type="button" class="mobile-nav-toggle d-lg-none"><i class="fa fa-bars"></i></button>');
  $('body').append('<div class="mobile-nav-overly"></div>');

  $(document).on('click', '.mobile-nav-toggle', function(e) {
    $('body').toggleClass('mobile-nav-active');
    $('.mobile-nav-toggle i').toggleClass('fa-times fa-bars');
    $('.mobile-nav-overly').toggle();
  });
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<nav class="main-nav float-right d-none d-lg-block">
  <ul>
    <li><a href="home.html" target="_Blank">home</a></li>
    <li><a href="about.html" target="_Blank">about</a></li>
  </ul>
</nav>

как это выглядит сейчас сейчас

желаемый результат нужен результат

Answer 1

Вы можете использовать

li { display: inline-block }

или

li { float: left;}

в вашем css.

элемент <li> по умолчанию имеет свойство display: block. это означает, что он ведет себя аналогично элементу типа <p> or <div>, занимая всю ширину содержимого.

Изменение этого свойства отображения на inline-block гарантирует, что вы по-прежнему будете иметь те же функции, что и с display: block, но теперь элементы будут занимать столько места, сколько им нужно.