0

Я что-то делал, делал, но второе меню открывается не так как хочется. Оно открывается вниз, а мне нужно влево, как на рисунку снизу: [введите сюда описание изображения

Но получатся вот так:

Код

<div class="navbar">
        <div class="navbar-logo">
            <a class="navbar-logo-link" aria-current="page" href="/">Indi Mops</a>
            <div class="navbar-links">
                <a class="navbar-link" aria-current="page" href="/">Главная</a>
                <a class="navbar-link" aria-current="page" href="#">Товары</a>
                <a class="navbar-link" aria-current="page" href="#">Каталог</a>
                <a class="navbar-link" aria-current="page" href="#">Доставка</a>
                <div class="dropdown" style="float:right;">
                    <button class="dropbtn navbar-link">Меню</button>
                    <div class="dropdown-content">
                        <div class="dropleft">
                            <button class="dropbtn navbar-link">Язык</button>
                            <div class="dropleft-content">
                                <a href="/"><img class="flag" src="assets/flags/ru.svg"></a>
                                <a href="#"><img class="flag" src="assets/flags/us.svg"></a>
                            </div>
                            <button class="dropbtn navbar-link">Контакты</button>
                            <button class="dropbtn navbar-link">Еще меню</button>
                            <div class="dropleft-content">
                                <a href="#">Кнопка1</a>
                                <a href="#">Кнопка2</a>
                            </div>
                          <button class="dropbtn navbar-link">Еще пункт</button>
                        </div>
                    </div>
                  </div>
            </div>
        </div>

--

.navbar {
    align-items: center;
    color: rgb(230, 230, 230);
    font-size: 20px;
    display:flex;
    line-height: 25px;
    padding-bottom: 20px;
    padding-left: 0px;
    padding-right: 0px;
    padding-top: 20px;
}

.navbar-logo {
    color: rgb(230, 230, 230);
    font-size: 40px;
    line-height: 50px;
    margin-right: 30px
}

.navbar-links {
    color: rgb(230, 230, 230);
    flex-grow: 1;
    font-size: 20px;
    line-height: 25px;
    display: inline;
}

.navbar-link {
    border-radius:6px;
    color:initial;
    font-size:1.25rem;
    padding:.5rem 1rem;
    color: rgb(230, 230, 230);
}

.navbar-link:hover {
    background-color:#3b3b3b;
    text-decoration:none;
}

.dropbtn {
    border: none;
    cursor: pointer;
    background-color: initial; 
}

.dropdown {
    position: relative;
    display: inline-block;
    top: 5px;
}

.dropdown-content {
    display: none;
    position: absolute;
    right: 0;
    background-color: #3b3b3b;
    min-width: 100px;
    z-index: 1;
    border-radius:6px;
    text-align: right;
}

.dropdown-content a {
    color: rgb(230, 230, 230);
    padding: .5rem 1rem;
    text-decoration: none;
    display: block;
}

.dropdown-content a:hover {
    background-color: #5b5a5a;
    border-radius:10px;
}

.dropdown:hover .dropdown-content {
    display: block;
}

.dropdown:hover .dropbtn {
    background-color: #3b3b3b;
}

.dropleft {
    position: relative;
    display: inline;
    top: 5px;
}

.dropleft-lang {
    display: none;
    position: absolute;
    right: 125px;
    button: 10px;
    background-color: #3b3b3b;
    min-width: 100px;
    z-index: 2;
    border-radius:6px;
    text-align: right;
}

.dropleft-other {
    display: none;
    position: absolute;
    right: 125px;
    margin-top: 10px;
    background-color: #3b3b3b;
    min-width: 100px;
    z-index: 2;
    border-radius:6px;
    text-align: right;
}

.dropleft-lang a {
    color: rgb(230, 230, 230);
    padding: .5rem 1rem;
    text-decoration: none;
    display: block;
}

.dropleft-other a {
    color: rgb(230, 230, 230);
    padding: .5rem 1rem;
    text-decoration: none;
    display: block;
}

.dropbtn:hover > .dropleft-lang {
  display: block;
}

.dropleft:hover .dropleft-lang .dropleft-other {
    display: block;
}

.dropleft:hover .dropbtn {
    background-color: #3b3b3b;
}

a {
    text-decoration: none;
    color: rgb(232, 231, 231);
}

body {
    color: rgb(230, 230, 230);
    font-family:  "SansDetect", sans-serif;
    font-size: 20px;
    line-height: 25px;
    margin-bottom: 0px;
    margin-left: 0px;
    margin-right: 0px;
    margin-top: 0px;
    height: 100%;
    background-color: rgb(12, 12, 12);
    margin-left: 30%;
}

1 ответ 1

0

Предложу Вам меню делать через список, вот пример. Это более простой и классический пример.

.topmenu {
    display: flex;
    background: #000;
}

nav ul {
  list-style: none;
  margin: 0;
    padding: 0;
}

nav a {
  text-decoration: none;
  display: block;
  transition: .3s linear;
}

.topmenu > li {
  position: relative;
}

.topmenu > li > a {  
  padding: 20px 30px;
  font-size: 12px;
  text-transform: uppercase;
  color: #FEFDFD;
  letter-spacing: 2px;
}

.topmenu > li > a.active, 
.submenu a:hover {color: red;}
.topmenu .fa, 
.submenu .fa {
  margin-left: 5px;
  color: inherit;
}

.submenu {
  position: absolute;
  z-index: 5;
  min-width: 200px;
  background: white;
  border-top: 1px solid #CBCBCC;
  border-left: 1px solid #CBCBCC;
  border-right: 1px solid #CBCBCC;
  visibility: hidden;
  opacity: 0; 
  transform-origin: 0% 0%;
  transform: rotateX(-90deg);
  transition: .3s linear;  
}

.submenu li {
    position: relative;
}
.submenu li a {
  color: #282828;
  padding: 10px 20px;
  font-size: 13px;
  border-bottom: 1px solid #CBCBCC;
}
.submenu .submenu {
  position: absolute;
  left: -101%;
  top: -1px;
  transition: .3s linear;
}

nav li:hover > .submenu {
  transform: rotateX(0deg);
  visibility: visible;
  opacity: 1;
}
<nav>
  <ul class="topmenu">
    
    <li><a href="">Тест</a></li>
    <li><a href="">Тест</a></li>
    <li><a href="">Тест</a></li>

    <li><a href="">Меню<span class="fa fa-angle-down"></span></a>
      <ul class="submenu">
        <li><a href="">меню второго уровня</a></li>
        <li><a href="">меню второго уровня<span class="fa fa-angle-down"></span></a>
          <ul class="submenu">
            <li><a href="">меню третьего уровня</a></li>
            <li><a href="">меню третьего уровня</a></li>
            <li><a href="">меню третьего уровня</a></li>
          </ul>
        </li>
        <li><a href="">меню второго уровня</a></li>
      </ul>
    </li>
  </ul>
</nav>

1
  • Спасибо за ответ, но я поседел денек над проектом и сделал все таки то что задумывал
    – Bohdan
    26 мая 2022 в 5:10

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.