1 Тема від vakotov

  • vakotov
  • Заблокований
  • Поза форумом
  • Дата реєстрації: 01.02.2021
  • Повідомлень: 31
    • Репутація: 8

Тема: Не працює css3 випадаюче меню

Знайшов на одному сайті як зробити випадаюче меню на чистому html/css3.

▼copy&paste і сайта автора

Стиль

body {
    font: 14px 'Verdana';
    margin: 0;
    padding: 0;
}
ul {
    display: block;
    margin: 0;
    padding: 0;
    list-style: none;
}
ul:after {
    display: block;
    content: ' ';
    clear: both;
    float: none;
}
ul.menu > li {
    float: left;
    position: relative;
}
ul.menu > li > a {
    display: block;
    padding: 10px;
    color: white;
    background-color: red;
    text-decoration: none;
}
ul.menu > li > a:hover {
    background-color: black;
}
ul.submenu {
    display: none;
    position: absolute;
    width: 120px;
    top: 37px;
    left: 0;
    background-color: white;
    border: 1px solid red;
}
ul.submenu > li {
    display: block;
}
ul.submenu > li > a {
    display: block;
    padding: 10px;
    color: white;
    background-color: red;
    text-decoration: none;
}
ul.submenu > li > a:hover {
    text-decoration: underline;
}
ul.menu > li:hover > ul.submenu {
    display: block;
}

Вставка

<ul class="menu">
    <li><a href=#>Menu 1</a>
        <ul class="submenu">
            <li><a href=#>Sudmenu 1</a></li>
            <li><a href=#>Sudmenu 1</a></li>
            <li><a href=#>Sudmenu 1</a></li>
        </ul>
    </li>
    <li><a href=#>Menu 2</a>
        <ul class="submenu">
            <li><a href=#>Sudmenu 2</a></li>
            <li><a href=#>Sudmenu 2</a></li>
            <li><a href=#>Sudmenu 2</a></li>
        </ul>
    </li>
    <li><a href=#>Menu 3</a>
        <ul class="submenu">
            <li><a href=#>Sudmenu 3</a></li>
            <li><a href=#>Sudmenu 3</a></li>
            <li><a href=#>Sudmenu 3</a></li>
        </ul>
    </li>
    <li><a href=#>Menu 4</a>
        <ul class="submenu">
            <li><a href=#>Sudmenu 4</a></li>
            <li><a href=#>Sudmenu 4</a></li>
            <li><a href=#>Sudmenu 4</a></li>
        </ul>
    </li>
    <li><a href=#>Menu 5</a>
        <ul class="submenu">
            <li><a href=#>Sudmenu 5</a></li>
            <li><a href=#>Sudmenu 5</a></li>
            <li><a href=#>Sudmenu 5</a></li>
        </ul>
    </li>
</ul>

Проблема в тому, що воно випадає через раз і передчасно закривається. Здалося що проблеми немає якщо вести курсор чітко по правому краю кожного пункта.
Як це виправити?

2 Відповідь від leofun01

  • leofun01
  • leofun01
  • Replace Team
  • Поза форумом
  • Дата реєстрації: 15.03.2014
  • Повідомлень: 3 295
    • Репутація: 2723

Re: Не працює css3 випадаюче меню

▼Прихований текст
vakotov написав:

Знайшов на одному сайті як зробити випадаюче меню на чистому html/css3. ...
Проблема в тому, що воно випадає через раз ...
Як це виправити?

Вам не доведеться це виправляти, якщо самостійно напишете таке меню, яке вам треба.

Подумай над цим

Подякували: FakiNyan1

leofun01 вебсайт

3 Відповідь від karmeljuk

  • karmeljuk
  • karmeljuk
  • Replace Team
  • Поза форумом
  • Дата реєстрації: 28.01.2014
  • Повідомлень: 1 497
    • Репутація: 816

Re: Не працює css3 випадаюче меню

Як це виправити?

Думаю, якщо спробувати розібратися то можна буде виправити. А якщо не спробувати, то виправити не вийде. Якось так

Подякували: leofun011

karmeljuk вебсайт

4 Відповідь від ch0r_t Востаннє редагувалося ch0r_t (06.02.2021 23:32:22)

  • ch0r_t
  • Ibi nullus timet mortem.
  • Поза форумом
  • Дата реєстрації: 04.11.2020
  • Повідомлень: 1 944
    • Репутація: 1203

Re: Не працює css3 випадаюче меню

▼Прихований текст
karmeljuk написав:

Думаю, якщо спробувати розібратися то можна буде виправити. А якщо не спробувати, то виправити не вийде.

https://i.ibb.co/WnmFf3M/good-point-doctor-who.gif

Подякували: leofun011

5 Відповідь від vakotov

  • vakotov
  • Заблокований
  • Поза форумом
  • Дата реєстрації: 01.02.2021
  • Повідомлень: 31
    • Репутація: 8

Re: Не працює css3 випадаюче меню

Питання стояло десь так: "Це баг css3 чи тут можна щось підправити?". Я намагався підправити самостійно методом втику, тільки не допомагало. Ви хотіли побачити напрацювання? Це з десяток модифікацій цього коду із підставлянням різних значень. Я лінився далі підставляти і тому задав питання. Але коли побачив цей сарказм - почав підставляти знову.
Допомогло зрештою оце:

ul.submenu {
    display: none;
    position: absolute;
    width: 120px;
    top: 35px;
    left: 0;
    background-color: white;
    border: 10px solid red;
}

top замість 37px 35, а border 10px замість 1
Якщо є краще рішення, питання ще актуальне, прошу підсказати.

Подякували: ch0r_t, plusxx, leofun013