Мигает возле правого края кнопки

Когда вы подводите курсор близко к правому краю «Проектов», он начинает мерцать.

:root {
    --light-gray: #979797;
    --dark-gray: #3D3D3D;
    --orange: #ff8400;
    --gray: #808080;
}

html, body {
    height: 100%;
    margin: 0;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
}

li, .nav_links a, button {
    font-family: "Montserrat", sans-serif;
    font-weight: 600;
    font-size: large;
    text-decoration: none;
    color: #edf0f1;
}

.header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0px 6%;
    background: #000 url(bg.webp) repeat 0 0;
    color: #edf0f1;
    font-family: "Montserrat", sans-serif;
    font-weight: 500;
    font-size: large;
    position: sticky;
    top: 0;
    z-index: 1000;
    border-bottom: 2px solid var(--orange);
    padding-left: 6%;
}

.header nav {
    flex-grow: 1;
    text-align: center;
}

a {
    color: white;
}

.nav_links {
    list-style: none;
    color: white;
    display: flex;
    justify-content: center;
    position: relative;
}

.nav_links li {
    display: inline-block;
    padding: 0 20px;
    color: white;
}

.nav_links li a:hover {
    color: var(--orange);
}

.buttons_home {
    display: flex;
    justify-content: center;
    gap: 5%;
    margin-top: 10%;
    width: 100%;
    list-style: none;
    padding: 0;
}

.buttons_home li {
    width: 27%;
}

.home_button {
    background-color: transparent;
    color: white;
    border: 2px solid white;
    padding: 20% 10%;
    cursor: pointer;
    font-family: "Montserrat", sans-serif;
    font-weight: 600;
    font-size: 125%;
    text-decoration: none;
    display: block;
    text-align: center;
}

.home_button:hover {
    background-color: transparent;
    border: 2px solid var(--orange);
    color: white;
}

.nav_links li a.active {
    color: var(--orange);
}

.container {
    display: grid;
    grid-template-rows: auto 1fr auto;
    min-height: 100vh;
}

.content {
    padding: 20px;
    display: flex;
    flex-direction: column;
    background: #000 url(bg.webp) repeat 0 0;
    flex-grow: 1;
}

.footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px;
    background: #000 url(bg.webp) repeat 0 0;
    color: #edf0f1;
    font-family: "Montserrat", sans-serif;
    font-weight: 500;
    font-size: medium;
    border-top: 2px solid var(--orange);
    position: relative;
}

.footer p {
    margin: 0;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
}

/* Project dropdown */
.dropdown {
    position: relative;
}

.project_menu {
    display: none;
    top: 100%;
    left: 0;
    background-color: #000;
    border: 2px solid var(--orange);
    list-style: none;
    padding: 0;
    margin: 0;
    width: 100%;
}

.project_menu li {
    padding: 10px 20px;
}

.project_menu li a {
    color: white;
    text-decoration: none;
}

.project_menu li a:hover {
    color: var(--orange);
}

.project_menu:hover {
    border: 2px solid white;
}

.dropdown:hover .project_menu {
    display: block;
    border-top: none;
}

<!DOCTYPE html>
<html lang = "en">
<head>
    <meta charset = "UTF-8">
    <meta name = "viewport" content = "width=device-width, initial-scale=1.0">
    <link rel = "stylesheet" href = "styles.css">
</head>
<body>
    <div class = "container">
        <div class = "content">
            <ul class = "buttons_home">
                <li><a class = "home_button" href = "about.html">About</a></li>
                <li><a class = "home_button" href = "resume.html">Resume</a></li>
                
                <li class = "dropdown">
                    <a class = "home_button" href = "#">Projects</a>
                    <ul class = "project_menu">
                        <li><a href = "projects.html">Kalkulacka</a></li>
                        <li><a href = "projects.html">Projekt2</a></li>
                        <li><a href = "projects.html">Projekt3</a></li>
                    </ul>
                </li>
            </ul>
        </div>
        
        <div class = "footer">
            <p>© 2024</p>
        </div>
    </div>
</body>
</html>

:root {
    --light-gray: #979797;
    --dark-gray: #3D3D3D;
    --orange: #ff8400;
    --gray: #808080;
}

html, body {
    height: 100%;
    margin: 0;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
}

li, .nav_links a, button {
    font-family: "Montserrat", sans-serif;
    font-weight: 600;
    font-size: large;
    text-decoration: none;
    color: #edf0f1;
}

.header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0px 6%;
    background: #000 url(bg.webp) repeat 0 0;
    color: #edf0f1;
    font-family: "Montserrat", sans-serif;
    font-weight: 500;
    font-size: large;
    position: sticky;
    top: 0;
    z-index: 1000;
    border-bottom: 2px solid var(--orange);
    padding-left: 6%;
}

.header nav {
    flex-grow: 1;
    text-align: center;
}

a {
    color: white;
}

.nav_links {
    list-style: none;
    color: white;
    display: flex;
    justify-content: center;
    position: relative;
}

.nav_links li {
    display: inline-block;
    padding: 0 20px;
    color: white;
}

.nav_links li a:hover {
    color: var(--orange);
}

.buttons_home {
    display: flex;
    justify-content: center;
    gap: 5%;
    margin-top: 10%;
    width: 100%;
    list-style: none;
    padding: 0;
}

.buttons_home li {
    width: 27%;
}

.home_button {
    background-color: transparent;
    color: white;
    border: 2px solid white;
    padding: 20% 10%;
    cursor: pointer;
    font-family: "Montserrat", sans-serif;
    font-weight: 600;
    font-size: 125%;
    text-decoration: none;
    display: block;
    text-align: center;
}

.home_button:hover {
    background-color: transparent;
    border: 2px solid var(--orange);
    color: white;
}

.nav_links li a.active {
    color: var(--orange);
}

.container {
    display: grid;
    grid-template-rows: auto 1fr auto;
    min-height: 100vh;
}

.content {
    padding: 20px;
    display: flex;
    flex-direction: column;
    background: #000 url(bg.webp) repeat 0 0;
    flex-grow: 1;
}

.footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px;
    background: #000 url(bg.webp) repeat 0 0;
    color: #edf0f1;
    font-family: "Montserrat", sans-serif;
    font-weight: 500;
    font-size: medium;
    border-top: 2px solid var(--orange);
    position: relative;
}

.footer p {
    margin: 0;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
}

/* Project dropdown */
.dropdown {
    position: relative;
}

.project_menu {
    display: none;
    top: 100%;
    left: 0;
    background-color: #000;
    border: 2px solid var(--orange);
    list-style: none;
    padding: 0;
    margin: 0;
    width: 100%;
}

.project_menu li {
    padding: 10px 20px;
}

.project_menu li a {
    color: white;
    text-decoration: none;
}

.project_menu li a:hover {
    color: var(--orange);
}

.project_menu:hover {
    border: 2px solid white;
}

.dropdown:hover .project_menu {
    display: block;
    border-top: none;
}

https://jsfiddle.net/Matko223/opkd963x/15/

Я пытался изменить ширину и положение выпадающего меню, но не смог этого понять. По какой-то причине раскрывающееся меню длиннее кнопки «Проекты», поэтому граница не соединяется должным образом.

.project_menu {
    display: none;
    position: absolute;
    top: calc(100% - 2px);
    left: -2px;
    background-color: transparent;
    border: 2px solid var(--orange);
    z-index: 1;
    list-style: none;
    padding: 0;
    margin: 0;
    width: calc(100% + 4px);
}

Как это должно выглядеть после наведения курсора на кнопку «Проекты»:

Видео (программа записи экрана не записывает): https://thewikihow.com/video_A_r-XyMMwBs

Еще хуже, когда я тестирую его на расширении Live Server.

Я не могу воспроизвести проблему. Пожалуйста, не могли бы вы создать работоспособный фрагмент вашего вопроса и проверить, действительно ли он показывает проблему.

— 26.06.2024 21:13

Невозможно воспроизвести на Edge/Chrome/FF/Safari.

— 26.06.2024 21:33

тоже не могу воспроизвести.

— 26.06.2024 22:37

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

— 27.06.2024 07:53

html css button drop-down-menu

26.06.2024 20:37

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...

Введение в CSS

CSS является неотъемлемой частью трех основных составляющих front-end веб-разработки.

Как выровнять Div по центру?

Чтобы выровнять элемент <div>по горизонтали и вертикали с помощью CSS, можно использовать комбинацию свойств и значений CSS. Вот несколько методов,...

Навигация по приложениям React: Исчерпывающее руководство по React Router

React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

Toor - Ангулярный шаблон для бронирования путешествий

Toor - Travel Booking Angular Template один из лучших Travel & Tour booking template in the world. 30+ валидированных HTML5 страниц, которые помогут...

Перейти к ответу Данный вопрос помечен как решенный

Ответы 2

Ответ принят как подходящий

Проблема возникает из-за того, что ширина области просмотра меняется, когда отображается раскрывающееся меню, если для него недостаточно места.

Справа появляется полоса прокрутки, которая уменьшает область просмотра.

Элементы списка находятся в пределах гибкости, поэтому каждый из них становится немного меньше при наведении курсора на проект. Если курсор находится очень близко к правому краю проекта при наведении курсора, то проекты становятся немного меньше, поэтому курсор оказывается за его пределами, после чего проекты возвращаются к своей исходной ширине, поэтому курсор оказывается внутри него и так далее в цикле. создавая эффект мерцания.

Это зависит от того, как вы хотите, чтобы отображалось меню, когда оно раскрывается, но, например, этот фрагмент не меняет остальную часть макета (т. е. оставляет нижний колонтитул и все остальное там, где оно есть), отображая раскрывающееся меню. позиция абсолютная и с более высоким z-индексом, чтобы ее было видно над тем, что следует за разделом меню.

:root {
  --light-gray: #979797;
  --dark-gray: #3D3D3D;
  --orange: #ff8400;
  --gray: #808080;
}

html,
body {
  height: 100%;
  margin: 0;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
}

li,
.nav_links a,
button {
  font-family: "Montserrat", sans-serif;
  font-weight: 600;
  font-size: large;
  text-decoration: none;
  color: #edf0f1;
}

.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0px 6%;
  background: #000 url(bg.webp) repeat 0 0;
  color: #edf0f1;
  font-family: "Montserrat", sans-serif;
  font-weight: 500;
  font-size: large;
  position: sticky;
  top: 0;
  z-index: 1000;
  border-bottom: 2px solid var(--orange);
  padding-left: 6%;
}

.header nav {
  flex-grow: 1;
  text-align: center;
}

a {
  color: white;
}

.nav_links {
  list-style: none;
  color: white;
  display: flex;
  justify-content: center;
  position: relative;
}

.nav_links li {
  display: inline-block;
  padding: 0 20px;
  color: white;
}

.nav_links li a:hover {
  color: var(--orange);
}

.buttons_home {
  display: flex;
  justify-content: center;
  gap: 5%;
  margin-top: 10%;
  width: 100%;
  list-style: none;
  padding: 0;
}

.buttons_home li {
  width: 27%;
}

.home_button {
  background-color: transparent;
  color: white;
  border: 2px solid white;
  padding: 20% 10%;
  cursor: pointer;
  font-family: "Montserrat", sans-serif;
  font-weight: 600;
  font-size: 125%;
  text-decoration: none;
  display: block;
  text-align: center;
}

.home_button:hover {
  background-color: transparent;
  border: 2px solid var(--orange);
  color: white;
}

.nav_links li a.active {
  color: var(--orange);
}

.container {
  display: grid;
  grid-template-rows: auto 1fr auto;
  min-height: 100vh;
}

.content {
  padding: 20px;
  display: flex;
  flex-direction: column;
  background: #000 url(bg.webp) repeat 0 0;
  flex-grow: 1;
}

.footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px;
  background: #000 url(bg.webp) repeat 0 0;
  color: #edf0f1;
  font-family: "Montserrat", sans-serif;
  font-weight: 500;
  font-size: medium;
  border-top: 2px solid var(--orange);
  position: relative;
}

.footer p {
  margin: 0;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
}


/* Project dropdown */

.dropdown {
  position: relative;
}

.project_menu {
  display: none;
  top: 100%;
  left: 0;
  background-color: #000;
  border: 2px solid var(--orange);
  list-style: none;
  padding: 0;
  margin: 0;
  width: 100%;
  position: absolute;
  z-index: 1;
}

.project_menu li {
  padding: 10px 20px;
}

.project_menu li a {
  color: white;
  text-decoration: none;
}

.project_menu li a:hover {
  color: var(--orange);
}

.project_menu:hover {
  border: 2px solid white;
}

.dropdown:hover .project_menu {
  display: block;
  border-top: none;
}

<!DOCTYPE html>
<html lang = "en">

<head>
  <meta charset = "UTF-8">
  <meta name = "viewport" content = "width=device-width, initial-scale=1.0">
  <link rel = "stylesheet" href = "styles.css">
</head>

<body>
  <div class = "container">
    <div class = "content">
      <ul class = "buttons_home">
        <li><a class = "home_button" href = "about.html">About</a></li>
        <li><a class = "home_button" href = "resume.html">Resume</a></li>

        <li class = "dropdown">
          <a class = "home_button" href = "#">Projects</a>
          <ul class = "project_menu">
            <li><a href = "projects.html">Kalkulacka</a></li>
            <li><a href = "projects.html">Projekt2</a></li>
            <li><a href = "projects.html">Projekt3</a></li>
          </ul>
        </li>
      </ul>
    </div>

    <div class = "footer">
      <p>© 2024</p>
    </div>
  </div>
</body>

</html>

27.06.2024 07:48

Ответы @AHaworth верны, однако это не решает проблему с границами. Чтобы исправить это, вам нужно добавить:

*, *::after, *::before {
  box-sizing: border-box;
}

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

27.06.2024 08:39

Другие вопросы по теме

Стилизация всплывающей подсказки в графиках Mui

Индекс кадра данных pandas в объединенную ячейку HTML

IText HTML в PDF меняет цвет фона

Кнопка со слайдером подтверждения

Текст выходит за ширину абзаца

Как повторить изображение с обеих сторон по вертикали?

Добавление вертикального пространства между элементами HTML (divs) в одном контейнере

Как динамически регулировать высоту контейнера при переносе гибких элементов в React с помощью CSS?

Bootstrap 5 selectpicker меняет цвет фона

Принудительное обновление расчета счетчика CSS

Мигает возле правого края кнопки

Ответы 2

Другие вопросы по теме

Похожие вопросы