Блог

Главная - Вопросы по программированию - Вложенный раскрывающийся список отображается неправильно

Вложенный раскрывающийся список отображается неправильно

#html #css #web #drop-down-menu

Вопрос:

У меня проблема с моим выпадающим списком. Когда я нажму на второй пункт в первом раскрывающемся списке с именем «Сатурн», появится второй раскрывающийся список. Это поведение верно только в том случае, если положение второго выпадающего списка блокирует метку «Сатурн». Я хотел бы, чтобы второй выпадающий список вел себя так же, как когда я нажимаю «венера».

 .container2 {
  width: 1000px;
  height: 500px;
  margin: 100px auto;
  background: #00002e;
  position: relative;
}

.dropdd {
  position: absolute;
  top: 35%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: white;
  width: 400px;
  line-height: 40px;
  padding: 8px 25px;
  border-radius: 20px;
}

nav label {
  color: sandybrown;
  font-size: 22px;
  font-weight: 500;
  display: block;
  cursor: pointer;
}

.button span {
  float: right;
  line-height: 40px;
  transition: 0.5s;
}

.button span.rotate {
  transform: rotate(-180deg);
}

nav ul {
  position: absolute;
  background: white;
  list-style: none;
  top: 75px;
  left: 0;
  width: 100%;
  display: none;
}

[id^=btn]:checked ul {
  display: block;
  position: absolute;
  background: white;
}

nav .menu:before {
  position: absolute;
  content: '';
  height: 20px;
  width: 20px;
  background: white;
  right: 20px;
  top: -10px;
  transform: rotate(45deg);
  z-index: -1;
}

nav ul li {
  line-height: 50px;
  padding: 8px 20px;
  cursor: pointer;
  border-bottom: 1px solid rgba(0, 0, 0, 0.2);
}

nav ul li label {
  font-size: 18px;
}

nav ul li a {
  color: sandybrown;
  text-decoration: none;
  font-size: 18px;
  display: block;
}

nav ul li a:hover,
nav ul li label:hover {
  color: rgb(4, 4, 32);
}

nav ul ul {
  position: static;
}

nav ul ul li {
  line-height: 30px;
  padding-left: 30px;
  border-bottom: none;
}

nav ul ul li a {
  color: sandybrown;
  font-size: 17px;
}

nav ul li span {
  font-size: 20px;
  float: right;
  margin-top: 10px;
  padding: 0 10px;
  transition: 0.5s;
}

nav ul li span.rotate {
  transform: rotate(-180deg);
}

input {
  display: none;
}

.a {
  margin-top: 100px;
} 
 <html>
<body>
  <div class="container2">
    <center>
      <h1 class="ourlabs">Our labs</h1>
    </center>
    <nav class="dropdd">
      <label for="btn" class="button">AndroMedical labs
                    <span class="fas fa-caret-down"></span>
                    </label>
      <input type="checkbox" id="btn">
      <ul class="menu">
        <li>
          <label for="btn-2" class="first">venus
                   <span class="fas fa-caret-down"></span>
                   </label>
          <input type="checkbox" id="btn-2">
          <ul>
            <li><a href="https://www.almokhtabar.com/">lab 1</a></li>
            <li><a href="https://www.medicalcardeg.com/معامل-البرج">lab 2</a></li>
          </ul>
        </li>
        <li>
          <label for="btn-3" class="second">Saturn
                   <span class="fas fa-caret-down"></span>
                   </label>
          <input type="checkbox" id="btn-3">
          <ul>
            <li><a href="http://www.royal-lab.net/">lab 3</a></li>
            <li><a href="https://www.alfalaboratory.com/arabic/">lab 4</a></li>
          </ul>
        </li>
      </ul>
    </nav>
</body>
</html>

Комментарии:

1. Что вы подразумеваете под выпадающим списком, перемещающимся наверх? Не могли бы вы уточнить, пожалуйста? Вот что я вижу, когда нажимаю на «Андромедицинские лаборатории». prnt.sc/148t7vg

2. основной контейнер перемещается наверх, когда я нажимаю на название или стрелку

3. Вы имеете в виду, что когда вы нажмете на вторую ссылку «Сатурн», перед надписью «Сатурн» появится второй выпадающий список, и тогда вы больше не сможете нажать на него?

Ответ №1:

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

 .container2 {
  width: 1000px;
  height: 500px;
  margin: 100px auto;
  background: #00002e;
  position: relative;
}

.dropdd {
  position: absolute;
  top: 35%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: white;
  width: 400px;
  line-height: 40px;
  padding: 8px 25px;
  border-radius: 20px;
}

nav label {
  color: sandybrown;
  font-size: 22px;
  font-weight: 500;
  display: block;
  cursor: pointer;
}

.button span {
  float: right;
  line-height: 40px;
  transition: 0.5s;
}

.button span.rotate {
  transform: rotate(-180deg);
}

nav ul {
  position: absolute;
  background: white;
  list-style: none;
  top: 75px;
  left: 0;
  width: 100%;
  display: none;
}

[id^=btn]:checked ul {
  display: block;
  position: absolute;
  background: white;
}

nav .menu:before {
  position: absolute;
  content: '';
  height: 20px;
  width: 20px;
  background: white;
  right: 20px;
  top: -10px;
  transform: rotate(45deg);
  z-index: -1;
}

nav ul li {
  line-height: 50px;
  padding: 8px 20px;
  cursor: pointer;
  border-bottom: 1px solid rgba(0, 0, 0, 0.2);
}

nav ul li label {
  font-size: 18px;
}

nav ul li a {
  color: sandybrown;
  text-decoration: none;
  font-size: 18px;
  display: block;
}

nav ul li a:hover,
nav ul li label:hover {
  color: rgb(4, 4, 32);
}

nav ul ul {
  position: static;
}

nav ul ul li {
  line-height: 30px;
  padding-left: 30px;
  border-bottom: none;
}

nav ul ul li a {
  color: sandybrown;
  font-size: 17px;
}

nav ul li span {
  font-size: 20px;
  float: right;
  margin-top: 10px;
  padding: 0 10px;
  transition: 0.5s;
}

nav ul li span.rotate {
  transform: rotate(-180deg);
}

input {
  display: none;
}

.a {
  margin-top: 100px;
}
.last-item
{
  margin-top:58px;
} 
 <html>
<body>
  <div class="container2">
    <center>
      <h1 class="ourlabs">Our labs</h1>
    </center>
    <nav class="dropdd">
      <label for="btn" class="button">AndroMedical labs
                    <span class="fas fa-caret-down"></span>
                    </label>
      <input type="checkbox" id="btn">
      <ul class="menu">
        <li>
          <label for="btn-2" class="first">venus
                   <span class="fas fa-caret-down"></span>
                   </label>
          <input type="checkbox" id="btn-2">
          <ul>
            <li><a href="https://www.almokhtabar.com/">lab 1</a></li>
            <li><a href="https://www.medicalcardeg.com/معامل-البرج">lab 2</a></li>
          </ul>
        </li>
        <li>
          <label for="btn-3" class="second">Saturn
                   <span class="fas fa-caret-down"></span>
                   </label>
          <input type="checkbox" id="btn-3">
          <ul class="last-item">
            <li><a href="http://www.royal-lab.net/">lab 3</a></li>
            <li><a href="https://www.alfalaboratory.com/arabic/">lab 4</a></li>
          </ul>
        </li>
      </ul>
    </nav>

</body>

</html>

кстати, у вас также отсутствует html-тег в начале

Комментарии:

1. Ладно, это была проблема. но также и на главном веб-сайте, когда я добавляю этот раскрывающийся список и нажимаю на «Andromedical labs», он перемещается вверх, оставляя свою область. Надеюсь, вы понимаете, что я имею в виду.

2. а также есть кнопка со стрелкой, но я не знаю, почему она невидима -_-

3. Стрелка не видна, потому что библиотека fontawesome, используемая для значков, не видна, если вы не включаете css/javascript

4. Извините, я не понимаю, что вы подразумеваете под повышением. Когда я нажимаю на ваш пример, все находится на определенном месте. Вы имеете в виду, что пространство между надписью «Andromedical» и выпадающим меню слишком велико?

5. Я исправил это.. проблема заключалась в (NAV UL) на навигационной панели : когда я редактирую ее и даю позицию: абсолютную; она также изменяет позицию «выпадающего списка».

Метки: