|
|
Регистрация Восстановить пароль |
Повторная активизация e-mail |
Регистрация | Задать вопрос |
Заплачу за решение |
Новые сообщения |
Сообщения за день |
Расширенный поиск |
Правила |
Всё прочитано |
|
Опции темы | Поиск в этой теме |
15.08.2022, 17:37 | #1 |
Пользователь
Регистрация: 02.05.2022
Сообщений: 81
|
Прыгает меню при наведении почему?
Форумчане подскажите пожалуйста. У меня есть навигационное меню сайта, в трех первых пунктах выскакивающее вложенные меню. С первыми двумя пунктами все хорошо , а при наведение на третий пункт ЦЕНЫ | УСЛУГИ начинает прыгать меню влевую сторону. Я пробывал border solid 1px transparent делать для ссылок, но это не помогает. Проблема в третьем меню. Помогите. Заранее спасибо!
<!DOCTYPE html> <html lang="ru"> <head> <meta charset="UTF-8"> <link rel="stylesheet" href="C:\Users\1\.vscode\css\style. css"> <link rel="stylesheet" media="screen and (color)" href=""> <meta name = "viewport" content="width=device-width"> <link rel="icon" type="image" href="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcR3_rD-5659dOzUpO8Zx6cF3zFa_-xuZ5FdMg&usqp=CAU"> <title>DSG</title> </head> <body> <div class="header"> <div class="header__content"> <h1 class="header__content__h1">Ремонт DSG | S-Tronic</h1> <h3 class="header__content__h3gray">Про фессиональный ремонт ДСГ в Cанкт - Петербурге</h3> <h2 class="header__content__h2phone">📲8 (499)999-99-99</h2> </div> </div> <nav> <ul> <div class="dropdown"> <li> <a href="">ГЛАВНАЯ <span>☟</span></a></li> <div class="dropdown-content"> <a href="#">Ремонт DSG Audi<span>☞</span></a> <a href="#">Ремонт DSG Volkswagen<span>☞</span></a> <a href="#">Ремонт DSG Seat<span>☞</span></a> <a href="#">Ремонт DSG Skoda<span>☞</span></a> </div> </div> <div class="dropdown-2"> <li><a href="">ЗАПЧАСТИ DSG <span>☟</span></a></li> <div class="dropdown-content-2"> <a href="#">Сцепление DSG <span>☞</span></a> <a href="#">Маховики DSG <span>☞</span></a> <a href="#">Мехатроники <span>☞</span></a> <a href="#">Купить КПП DSG 6 <span>☞</span></a> <a href="#">Купить КПП DSG 7<span>☞</span></a> </div> </div> <div class="dropdown-3"> <li><a href="">ЦЕНЫ | УСЛУГИ <span>☟</span></a></li> <div class="dropdown-content-3"> <a href="#">Ремонт S-Tronic DL-501 <span>☞</span></a> <a href="#">Ремонт DSG 7 DQ200 <span>☞</span></a> <a href="#">Ремонт DSG 6 DQ250 <span>☞</span></a> <a href="#"> Ремонт DSG 7 DQ500<span>☞</span></a> <a href="#">Ремонт DSG 7 DQ381<span>☞</span></a> <a href="#">Ремонт DSG 7 DL382 <span>☞</span></a> <a href="#">Ремонт AL552 0D5<span>☞</span></a> </div> </div> <li><a href="">ОПЛАТА | ДОСТАВКА</a></li> <li><a href="">КОНТАКТЫ</a></li> <li><a href="">ОТЗЫВЫ</a></li> <li id="blink-2"><a href="">📲8(495)324-12-33</a></li> </ul> </nav> <script src="C:\Users\1\.vscode\index.js\in dex.js"></script> </body> </html> * { box-sizing: border-box; } body { max-width: 1200px; margin: 0 auto; background-color: rgb(255, 255, 255); } .header { display: flex; flex-direction: column; } .header__content { text-align: center; } .header__content__h1 { cursor: pointer; font-weight: bolder; font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif; } .header__content__h3gray { color: gray; font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif; } .header__content__h2phone { cursor: pointer; } .header__content__h1:hover { color: orangered; } .header__content__h2phone:hover { color: orangered; } nav { margin-top: 30px; } ul { list-style: none; margin: 0; padding: 0 ; } nav ul { display: flex; flex-direction: row; justify-content: space-around; height: 65px; background-color: black; } nav li { display: flex; } a { text-decoration: none; } nav a { display: flex; justify-content: center; align-items: center; width: 100%; text-transform: uppercase; color: white; font-size: 16px; font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif; padding: 0 10px; } nav a:hover { background-color: rgba(255, 68, 0, 0.611); } span { font-size: 45px; color: orangered; } #blink-2{ color: #fff; font-size: 24px; font-weight: 700; text-align: center; animation:blur .99s ease-out infinite; text-shadow:text-shadow: 0 0 5px #abc, 0 0 7px #abc; } @keyframes blur{ from{ text-shadow:0px 0px 10px #fff, 0px 0px 10px #fff, 0px 0px 25px #fff, 0px 0px 25px #fff, 0px 0px 25px #fff, 0px 0px 25px #fff, 0px 0px 25px #fff, 0px 0px 25px #fff, 0px 0px 50px #fff, 0px 0px 50px #fff ;} } /* Контейнер <div> - необходим для размещения выпадающего содержимого */ .dropdown { position: relative; display: inline-block; } /* Выпадающее содержимое (скрыто по умолчанию) */ .dropdown-content { display: none; position: absolute; background-color: #f1f1f1; min-width: 300px; margin-top: 5px; box-shadow: 10px 18px 16px 8px rgba(13, 13, 13, 0.2); z-index: 1; } /* Ссылки внутри выпадающего списка */ .dropdown-content a { color: black; padding: 5px 5px auto; font-size: 18px; text-decoration: none; display: block; } /* Изменение цвета выпадающих ссылок при наведении курсора */ .dropdown-content a:hover { background-color: rgba(73, 132, 157, 0.896); color: white; } /* Показать выпадающее меню при наведении курсора */ .dropdown:hover .dropdown-content {display: block;} .dropdown-2 { position: relative; display: inline-block; } /* Выпадающее содержимое (скрыто по умолчанию) */ .dropdown-content-2 { display: none; position: absolute; background-color: #f1f1f1; min-width: 220px; margin-top: 5px; box-shadow: 10px 18px 16px 8px rgba(13, 13, 13, 0.2); z-index: 1; } /* Ссылки внутри выпадающего списка */ .dropdown-content-2 a { color: black; padding: 5px 5px auto; font-size: 18px; text-decoration: none; display: block; } /* Изменение цвета выпадающих ссылок при наведении курсора */ .dropdown-content-2 a:hover { background-color: rgba(73, 132, 157, 0.896); color: white; } /* Показать выпадающее меню при наведении курсора */ .dropdown-2:hover .dropdown-content-2 {display: block;} /* Контейнер <div> - необходим для размещения выпадающего содержимого */ .dropdown-3 { position: relative; display: inline-block; } /* Выпадающее содержимое (скрыто по умолчанию) */ .dropdown-content-3 { display: none; position: absolute; background-color: #f1f1f1; min-width: 300px; margin-top: 5px; box-shadow: 10px 18px 16px 8px rgba(13, 13, 13, 0.2); z-index: 1; } /* Ссылки внутри выпадающего списка */ .dropdown-content-3 a { color: black; padding: 5px 5px auto; font-size: 18px; text-decoration: none; display: block; } /* Изменение цвета выпадающих ссылок при наведении курсора */ .dropdown-content-3 a:hover { background-color: rgba(73, 132, 157, 0.896); color: white; } /* Показать выпадающее меню при наведении курсора */ .dropdown-3:hover .dropdown-content-3 {display: block; } |
16.08.2022, 19:08 | #2 |
Пользователь
Регистрация: 02.05.2022
Сообщений: 81
|
Вобщем все решилось само по себе, после того как ниже пошел контент.
|
Похожие темы | ||||
Тема | Автор | Раздел | Ответов | Последнее сообщение |
Появление всплывающего меню с задержкой при наведении | danilkins | Помощь студентам | 0 | 22.01.2014 11:05 |
фон меню при наведении ! | Morgusha | HTML и CSS | 1 | 13.08.2013 10:41 |
CSS. a hover. При наведении все меню дергается | knopka3 | HTML и CSS | 8 | 05.06.2013 18:10 |
Смена картинки при наведении мыши на меню | Unknown-As | HTML и CSS | 4 | 31.03.2009 16:17 |
Macromedia Dreamweaver закрывается при наведении на пункт меню | Xardas | Софт | 2 | 04.05.2008 21:39 |