- Выпадающее меню CSS не работает должным образом в Google Chrome (подменю исчезают при наведении)
- Не работает выпадающее меню через CSS (hover)
- 1 ответ 1
- Похожие
- Подписаться на ленту
- Не работает выпадающее меню на CSS
- 7 ответов на этот вопрос
- Рекомендованные сообщения
- Присоединяйтесь к обсуждению
- Похожие публикации
- По окончании обучения Вы сможете!
- Обсуждения
- Не работает подменю
- Не работает выпадающее css-меню в google chrome
- 1 ответ на этот вопрос
- Рекомендованные сообщения
- Присоединяйтесь к обсуждению
- Похожие публикации
- По окончании обучения Вы сможете!
- Обсуждения
Выпадающее меню CSS не работает должным образом в Google Chrome (подменю исчезают при наведении)
У меня проблемы с небольшим выпадающим меню CSS (для выбора языков), которое не будет работать должным образом в Chrome (отлично работает в IE и Firefox). Выбор языка исчезает при их зависании, но только иногда. На самом деле, похоже, нет никакой логики. Буду признателен за любую помощь. Меню можно увидеть на этой тестовой странице в правом верхнем углу: http://www.hypro.se/test Изменение: я не мог решить проблему, но я решил использовать Polyglot Language Switcher вместо этого: http://www.ixtendo.com/polyglot-language-switcher-2 Мой CSS:
#dropdown < width: 110px; position: absolute; top: 0px; right: 0px; background: #222; font: 13px 'Open Sans Condensed', sans-serif; font-weight: 300; color: #fff; text-decoration: none; z-index: 9999999; >#dropdown li < width: 110px; height: 24px; float: left; background: #222; list-style: none; font: 13px 'Open Sans Condensed', sans-serif; font-weight: 300; color: #fff; text-decoration: none; border: 0; >#dropdown li:hover < background: #000; >#dropdown li a < font: 13px 'Open Sans Condensed', sans-serif; font-weight: 300; color: #fff; text-decoration: none; >#dropdown ul < background: #222; display: none; padding: 0; position: absolute; top: 24px; float: left; z-index: 9999; >#dropdown li:hover ul < display: block; >.globe < position: relative; left: 6px; top: 4px; >.choose_language < position: relative; left: 12px; top: 1px; >.flag < padding-left: 5px; >.language
Я не мог воспроизвести проблему, но я думаю, что установка z-index в меню выбора на высокое значение может решить вашу проблему
Не работает выпадающее меню через CSS (hover)
Я только начала учиться, уже возникают небольшие проблемки:( Уже все перепробовала и перепроверила, не появляется выпадающее меню при наведении. Делала по уроку.
.root < list-style-type: none; display: inline-block; position: relative; padding: 10px 15px; background-color: #ccc; cursor: pointer; >.root:hover < position: relative; display: inline-block; background-color: aqua; >.root:hover .dropdown < display: block; // Вот тут не работает background-color: #ccc; >.dropdown < display: none; position: absolute; top: 54px; left: 48px; box-sizing: border-box; background-color: aquamarine; padding: 10px; width: 100%; >.dropdown>li < cursor: pointer; list-style: none; >.dropdown>li:hover
1 ответ 1
Нужно было вложить .dropdown в .root
.root < list-style-type: none; display: inline-block; position: relative; padding: 10px 15px; background-color: #ccc; cursor: pointer; >.root:hover < position: relative; display: inline-block; background-color: aqua; >.root:hover .dropdown < display: block; background-color: #ccc; >.dropdown < display: none; position: absolute; top: 54px; left: 48px; box-sizing: border-box; background-color: aquamarine; padding: 10px; width: 100%; >.dropdown>li < cursor: pointer; list-style: none; >.dropdown>li:hover
@medok, пожалуйста) Если ответ решает проблему, пожалуйста, нажмите на галочку рядом с ним. Это отмечает вопрос как решеный и помечает ответ как решение.
Похожие
Подписаться на ленту
Для подписки на ленту скопируйте и вставьте эту ссылку в вашу программу для чтения RSS.
Дизайн сайта / логотип © 2023 Stack Exchange Inc; пользовательские материалы лицензированы в соответствии с CC BY-SA . rev 2023.7.27.43548
Нажимая «Принять все файлы cookie» вы соглашаетесь, что Stack Exchange может хранить файлы cookie на вашем устройстве и раскрывать информацию в соответствии с нашей Политикой в отношении файлов cookie.
Не работает выпадающее меню на CSS
Есть кнопка Online (.ostatus .button), при наведении мыши на которую должно выпадать меню (.ostatus ul), но ничего не происходит. Делал по готовым примерам в интернете — тоже ничего.
.ostatus .button .ostatus ul .ostatus .button:hover ul
Ссылка на комментарий
Поделиться на других сайтах
7 ответов на этот вопрос
Рекомендованные сообщения
Присоединяйтесь к обсуждению
Вы можете опубликовать сообщение сейчас, а зарегистрироваться позже. Если у вас есть аккаунт, войдите в него для написания от своего имени.
Примечание: вашему сообщению потребуется утверждение модератора, прежде чем оно станет доступным.
Похожие публикации
Использую готовый плагин для модальных окон(от MaxGraph). Проблема в том, что когда у меня открыто два модальных окна, для примера Форма + Политика конфендициальности, и мне нужно закрыть политику вместе с ней закрывается и другое модальное окно. В JS я не сильно разбираюсь(собственно из за этого и использую готовый плагин), можете помочь кто работал с этим плагином? Я примерно понимаю как он работает, но реализовать чтобы закрывалось только одно не получается.
Мне нужен такой результат :
Не понимаю почему background не применяется вокруг иконок:
Html:
По окончании обучения Вы сможете!
.png){kind=icon}
Css:
.finish .finish_wrapper < margin-top: 41px; display: flex; justify-content: space-between; >.finish .finish_wrapper .finish_item < width: 204px; >.finish .finish_wrapper .finish_item .finish_round < width: 115px; height: 115px; background-color: #b4e2ff; border-radius: 8px; >.finish_descr < font-family: Roboto; font-size: 17px; line-height: 20px; font-weight: 300; color: #efefef; Спасибо!
Уже решил, спасибо!
У меня CSS селектор вида:
.finish .finish_wrapper .finish_item .finish_round
А должен быть:
.finish .finish_wrapper finish_item .finish_round
Т.е. без точки перед finish_item, так как это не класс, а элемент
Приветствую!
Подскажите, плиз, как сделать чекбокс как на скрине?
Я новичок в верстке и что-то не могу разобраться в кастомизации данной штуки
Всем привет, у меня такой вот вопрос, делаю сайт через react и при изменении расширения что-то идёт не так и какой-то бред получается, подскажите как решить данную проблему. Я вообще не понимаю из-за чего это происходит, по этому не могу нормально объяснить 😅.
Обсуждения
http://htmlbook.ru/html/area на одной картинке можно организовать несколько областей ссылок ведущих на разные страницы
margin внутри таблицы не работает, кста еще можно вот так реализовать так заливка ячеек будет корректно работать, если она нужна будет
| row 1 cell 1 | row 1 cell 2 | row 1 cell 3 must contain several lines |
| row 2 cell 1 | row 2 cell 2 | |
| row 3 cell 1 | row 3 cell 2 | |
| row 4 cell 1 | row 4 cell 2 | |
| row 5 cell 1 | row 5 cell 2 | row 5 cell 3 |
| row 6 cell 1 | row 6 cell 2 | row 5 cell 3 |
если не критично еще можно использовать обертку внутри ячеек, и с ней много чего можно дополнительного реализовать в таблицах
Switch74 Спасибо, второй вариант как раз то, что хотелось. Не понятно только, почему margin-top не работает, пробовал задавать и для клеточек, и для всей строки. А про padding как-то не подумал.
тогда как выше предложили пустую строку
| row 1 cell 1 | row 1 cell 2 | row 1 cell 3 must contain several lines |
| row 2 cell 1 | row 2 cell 2 | |
| row 3 cell 1 | row 3 cell 2 | |
| row 4 cell 1 | row 4 cell 2 | |
| row 5 cell 1 | row 5 cell 2 | row 5 cell 3 |
| row 6 cell 1 | row 6 cell 2 | row 5 cell 3 |
или если подсветка ячеек не обязательна, то можно так
| row 1 cell 1 | row 1 cell 2 | row 1 cell 3 must contain several lines |
| row 2 cell 1 | row 2 cell 2 | |
| row 3 cell 1 | row 3 cell 2 | |
| row 4 cell 1 | row 4 cell 2 | |
| row 5 cell 1 | row 5 cell 2 | row 5 cell 3 |
| row 6 cell 1 | row 6 cell 2 | row 5 cell 3 |
Не работает подменю
Доброй ночи. Есть выпадающее меню и по плану когда наводишь на Produst — Desctop cправа должно появится скрытое подменю drop-menu2. Я уже и дал пункту меню desctom класс, а вот как с помощью ховера сделать так чтобы появлялась спрятанное меню не понимаю. html
-->/*-----------------cammon start------------------*/ * < box-sizing: border-box; >body < background-color: #faf0e6; padding: 10px 0; >.bc < background-color: #f4a460; >.container < width: 1200px; margin: 0 auto; >a, span < display: inline-flex; color: inherit; text-decoration: none; >/*-----------------cammon end------------------*/ .nav < display: flex; justify-content: space-between; align-items: center; padding-bottom: 5px; >.logo < font-family: sans-serif; font-size: 50px; font-weight: 900; >.logo > img < width: 100px; margin-right: 10px; >.menu < display: flex; align-items: center; font-size: 20px; font-weight: bold; color: #0096d6; >.menu > li + li < margin-left: 10px; >.menu li < position: relative; >.menu li:hover > a < text-decoration: underline; >.menu a < padding: 10px 25px; background-color: #d3d3d3; border-radius: 10px; border: 2px solid #0096d6; >.drop-menu < padding: 10px; position: absolute; left: 0; top: 100%; visibility: hidden; opacity: 0; >.drop-menu2 < position: absolute; right: 0; left: 100%; visibility: hidden; opacity: 0; >.drop-menu > li + li < margin-top: 10px; >.menu li:hover > .drop-menu < visibility: visible; opacity: 1; >.desctop li:hover < visibility: visible; opacity: 2; >.main .header .container .header-left < width: 300px; min-height: 150px; padding-top: 10px; >.header .container .header-right < width: 850px; >.header .container .header-bottom < width: 1200px; min-height: 250px; margin: 25px 0; >.main .container < display: flex; justify-content: space-between; flex-wrap: wrap; >.main .container .sidebar-left < width: 300px; min-height: 200px; >.main .container .sidebar-middle < width: 500px; >.main .container .sidebar-left < width: 300px; >.main .container .sidebar-first < width: 580px; min-height: 200px; margin: 20px 0; >.main .container .sidebar-second < width: 580px; margin: 20px 0; >.footer .container .footer-first < width: 100%; min-height: 100px; margin-bottom: 20px; >.footer .container .footer-second
Не работает выпадающее css-меню в google chrome
Пару дней назад задумал менять дизайн сайта, посвященному теме общепита и банкетного зала! Менять нужно было, так сказать, на лету(без сливания на тестовый хостинг), то есть основная html-верстка осталась практически нетронутой, всю работу планировал свести к правке css и замене изображений! Ну. ещё слайдер в шапке поменял!
Все шло и идет как задумано, но сегодня заметил что-то необъяснимое: во всех браузерах верхнее горизонтальное меню сайта отрабатывает как положено — при наведении мышки появляется выпадающее меню, а вот в хроме — ни фига! Я уже и так, и так — всё мимо!
Уважаемый специалисты, быть может, вы сможете разобраться в этом? Я проверял с дом.ноута и с рабочей машины!
Вот сайт: http://www.clubterritoria.ru — это главная страница с новым дизайном! Ещё успел обновить разделы «банкеты» и «бизнес-ланч», остальные страницы со старым дизайном! Самое интересное, что в старом дизайне выпадающее меню работает и на хроме, как и раньше!
В общем, если сможете, посоветуйте.
Ссылка на комментарий
Поделиться на других сайтах
1 ответ на этот вопрос
Рекомендованные сообщения
Присоединяйтесь к обсуждению
Вы можете опубликовать сообщение сейчас, а зарегистрироваться позже. Если у вас есть аккаунт, войдите в него для написания от своего имени.
Примечание: вашему сообщению потребуется утверждение модератора, прежде чем оно станет доступным.
Похожие публикации
Использую готовый плагин для модальных окон(от MaxGraph). Проблема в том, что когда у меня открыто два модальных окна, для примера Форма + Политика конфендициальности, и мне нужно закрыть политику вместе с ней закрывается и другое модальное окно. В JS я не сильно разбираюсь(собственно из за этого и использую готовый плагин), можете помочь кто работал с этим плагином? Я примерно понимаю как он работает, но реализовать чтобы закрывалось только одно не получается.
Мне нужен такой результат :
Не понимаю почему background не применяется вокруг иконок:
Html:
По окончании обучения Вы сможете!
Css:
.finish .finish_wrapper < margin-top: 41px; display: flex; justify-content: space-between; >.finish .finish_wrapper .finish_item < width: 204px; >.finish .finish_wrapper .finish_item .finish_round < width: 115px; height: 115px; background-color: #b4e2ff; border-radius: 8px; >.finish_descr < font-family: Roboto; font-size: 17px; line-height: 20px; font-weight: 300; color: #efefef; Спасибо!
Уже решил, спасибо!
У меня CSS селектор вида:
.finish .finish_wrapper .finish_item .finish_round
А должен быть:
.finish .finish_wrapper finish_item .finish_round
Т.е. без точки перед finish_item, так как это не класс, а элемент
Приветствую!
Подскажите, плиз, как сделать чекбокс как на скрине?
Я новичок в верстке и что-то не могу разобраться в кастомизации данной штуки
Всем привет, у меня такой вот вопрос, делаю сайт через react и при изменении расширения что-то идёт не так и какой-то бред получается, подскажите как решить данную проблему. Я вообще не понимаю из-за чего это происходит, по этому не могу нормально объяснить 😅.
Обсуждения
http://htmlbook.ru/html/area на одной картинке можно организовать несколько областей ссылок ведущих на разные страницы
margin внутри таблицы не работает, кста еще можно вот так реализовать так заливка ячеек будет корректно работать, если она нужна будет
| row 1 cell 1 | row 1 cell 2 | row 1 cell 3 must contain several lines |
| row 2 cell 1 | row 2 cell 2 | |
| row 3 cell 1 | row 3 cell 2 | |
| row 4 cell 1 | row 4 cell 2 | |
| row 5 cell 1 | row 5 cell 2 | row 5 cell 3 |
| row 6 cell 1 | row 6 cell 2 | row 5 cell 3 |
если не критично еще можно использовать обертку внутри ячеек, и с ней много чего можно дополнительного реализовать в таблицах
Switch74 Спасибо, второй вариант как раз то, что хотелось. Не понятно только, почему margin-top не работает, пробовал задавать и для клеточек, и для всей строки. А про padding как-то не подумал.
тогда как выше предложили пустую строку
| row 1 cell 1 | row 1 cell 2 | row 1 cell 3 must contain several lines |
| row 2 cell 1 | row 2 cell 2 | |
| row 3 cell 1 | row 3 cell 2 | |
| row 4 cell 1 | row 4 cell 2 | |
| row 5 cell 1 | row 5 cell 2 | row 5 cell 3 |
| row 6 cell 1 | row 6 cell 2 | row 5 cell 3 |
или если подсветка ячеек не обязательна, то можно так
| row 1 cell 1 | row 1 cell 2 | row 1 cell 3 must contain several lines |
| row 2 cell 1 | row 2 cell 2 | |
| row 3 cell 1 | row 3 cell 2 | |
| row 4 cell 1 | row 4 cell 2 | |
| row 5 cell 1 | row 5 cell 2 | row 5 cell 3 |
| row 6 cell 1 | row 6 cell 2 | row 5 cell 3 |