Блог

Главная - Вопросы по программированию - Как мне сделать так, чтобы выпадающее меню оставалось открытым, когда я не навожу курсор на пункт меню?

Как мне сделать так, чтобы выпадающее меню оставалось открытым, когда я не навожу курсор на пункт меню?

#html #css

#HTML #css

Вопрос:

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

Попытки решения:

  1. Я просмотрел другие сообщения StackOverflow, но не смог найти ни одного, который дал бы мне решение. Вероятно, это связано с моим невежеством, и если я укажу правильное направление, я уверен, что найду то, что мне нужно.
  2. Я добавил свойство display:block при наведении курсора на любой из выпадающих элементов, но это не работает, если вы не достаточно быстры, чтобы перейти от пункта меню навигации к выпадающему элементу.

Структура HTML:

     <div>
      <nav class="navbar">
        <ul class="navbar-nav">
          <li class="nav-item"><router-link to="/">Home</router-link></li>
          <li class="nav-item">
            <a href="">Projects</a>
            <ul>
              <li class="nav-item-dropdown">
                <router-link to="/pokemon">Pokemon</router-link>
              </li>
              <li class="nav-item-dropdown">
                <router-link to="/graphs">Graphs</router-link>
              </li>
              <li class="nav-item-dropdown"><router-link to="/data">Data</router-link></li>
            </ul>
          </li>
          <li class="nav-item">
            <router-link to="/contact">Contact</router-link>
          </li>
          <li class="nav-item"><img src="@/assets/github.png" id="logo" /></li>
          <li class="nav-item">
            <img src="@/assets/linkedin.png" id="logo" />
          </li>
        </ul>
      </nav>
    </div>

CSS:

 .navbar {
  display: flex;
  height: 7vh;
  align-items: center;
  justify-content: center;
  font-size: 1.2em;
  border-bottom: 1px solid #52657a;
  width: 100%;
}

.navbar-nav {
  list-style: none;
  display: flex;
  align-items: center;
  padding-top: 2vh;
  padding-bottom: 2vh;
}

.nav-item {
  padding-left: 1vw;
  text-decoration: none;
}

.nav-link {
  text-decoration: none;
  color: white;
}


nav ul ul {
  position: absolute;
  list-style: none;
  top: 60px;
  padding: 0;
  text-align: left;
  display: none;
  background: #0A141C;
}

nav ul ul li {
  padding-bottom: 10px;
  padding-top: 5px
}

nav ul li:hover > ul {
  display: block;
}

.nav-link:hover {
  text-decoration: none;
  color: #536778;
}

.router-link {
  text-decoration: none;
}

.router-link-exact-active {
  color: rgb(26, 219, 219);
}

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


#logo {
  max-width: 3.5vh;
  max-height: 3.5vh;
}

Спасибо за ваше время и помощь.

Ответ №1:

Не могли бы вы ознакомиться с приведенным ниже кодом, надеюсь, он сработает для вас. Когда мы используем абсолютную позицию в любом элементе, мы должны указать его родительскую позицию как относительную позицию, после чего мы можем изменить абсолютную позицию элемента в соответствии с нашими требованиями.

Пожалуйста, обратитесь к этой ссылке https://jsfiddle.net/bve8ok53/2 /

 .navbar {
  display: flex;
  height: 7vh;
  align-items: center;
  justify-content: center;
  font-size: 1.2em;
  border-bottom: 1px solid #52657a;
  width: 100%;
}

.navbar-nav {
  list-style: none;
  display: flex;
  align-items: center;
  padding-top: 2vh;
  padding-bottom: 2vh;
}

.nav-item {
  padding-left: 1vw;
  text-decoration: none;
  position: relative;
}

.nav-link {
  text-decoration: none;
  color: red;
}


nav ul ul {
  position: absolute;
  list-style: none;
  top: 100%;
  padding: 0;
  text-align: left;
  display: none;
  background: #0A141C;
}

nav ul ul li {
  padding-bottom: 10px;
  padding-top: 5px
}

nav ul li:hover > ul {
  display: block;
}

.nav-link:hover {
  text-decoration: none;
  color: #536778;
}

.router-link {
  text-decoration: none;
}

.router-link-exact-active {
  color: rgb(26, 219, 219);
}

li a {
  text-decoration: none;
  color: black;
}


#logo {
  max-width: 3.5vh;
  max-height: 3.5vh;
} 
   <div>
      <nav class="navbar">
        <ul class="navbar-nav">
          <li class="nav-item"><router-link to="/">Home</router-link></li>
          <li class="nav-item">
            <a href="">Projects</a>
            <ul>
              <li class="nav-item-dropdown">
                <router-link to="/pokemon">Pokemon</router-link>
              </li>
              <li class="nav-item-dropdown">
                <router-link to="/graphs">Graphs</router-link>
              </li>
              <li class="nav-item-dropdown"><router-link to="/data">Data</router-link></li>
            </ul>
          </li>
          <li class="nav-item">
            <router-link to="/contact">Contact</router-link>
          </li>
          <li class="nav-item"><img src="@/assets/github.png" id="logo" /></li>
          <li class="nav-item">
            <img src="@/assets/linkedin.png" id="logo" />
          </li>
        </ul>
      </nav>
    </div>

Ответ №2:

Измените position: absolute; на position: relative; in nav ul ul , и я не уверен, был ли этот «пробел» между меню и выпадающим списком преднамеренным, но вы можете вернуть его, добавив немного пикселей в top Take a look:

 .navbar {
  display: flex;
  height: 7vh;
  align-items: center;
  justify-content: center;
  font-size: 1.2em;
  border-bottom: 1px solid #52657a;
  width: 100%;
}

.navbar-nav {
  list-style: none;
  display: flex;
  align-items: center;
  padding-top: 2vh;
  padding-bottom: 2vh;
}

.nav-item {
  padding-left: 1vw;
  text-decoration: none;
}

.nav-link {
  text-decoration: none;
  color: white;
}


nav ul ul {
  position: relative;
  list-style: none;
  top: 80px;
  padding: 0;
  text-align: left;
  display: none;
  background: #0A141C;
}

nav ul ul li {
  padding-bottom: 10px;
  padding-top: 5px
}

nav ul li:hover ul {
  display: block;
}

.nav-link:hover {
  text-decoration: none;
  color: #536778;
}

.router-link {
  text-decoration: none;
}

.router-link-exact-active {
  color: rgb(26, 219, 219);
}

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


#logo {
  max-width: 3.5vh;
  max-height: 3.5vh;
} 
  <div>
      <nav class="navbar">
        <ul class="navbar-nav">
          <li class="nav-item"><router-link to="/">Home</router-link></li>
          <li class="nav-item">
            <a href="">Projects</a>
            <ul>
              <li class="nav-item-dropdown">
                <router-link to="/pokemon">Pokemon</router-link>
              </li>
              <li class="nav-item-dropdown">
                <router-link to="/graphs">Graphs</router-link>
              </li>
              <li class="nav-item-dropdown"><router-link to="/data">Data</router-link></li>
            </ul>
          </li>
          <li class="nav-item">
            <router-link to="/contact">Contact</router-link>
          </li>
          <li class="nav-item"><img src="@/assets/github.png" id="logo" /></li>
          <li class="nav-item">
            <img src="@/assets/linkedin.png" id="logo" />
          </li>
        </ul>
      </nav>
    </div>