Блог

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

Мое выпадающее меню работает, но оно опускается под навигационной панелью

#html #css #frontend

Вопрос:

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

 .sub-menu {
  display: none;
  margin-top: 0 !important;
}

.navbar-header .navbar-ul .main-menu-items .about-us-menu #about-sub-menu {
  z-index: 100;
  position: relative;
}

.navbar-header .navbar-ul .about-us-menu .sub-menu {
  width: 150px;
}

.navbar-header .navbar-ul .about-us-menu .sub-menu ul li a {
  padding-top: 10px;
  padding-left: 0;
  padding-right: 0;
  padding-bottom: 0;
}

.sub-menu ul li {
  margin: 15px;
  width: 120px;
  position: relative;
  /* padding: 15px; */
}

.navbar-header .navbar-ul .courses-sub-menu:hover .sub-menu ul li a {
  width: 150px;
  margin: 0 !important;
  padding-top: 10px;
  padding-left: 0;
  padding-right: 0;
  padding-bottom: 0;
}

.navbar-header .navbar-ul .about-us-menu .sub-menu {
  width: 180px;
}

.navbar-header ul li:hover .sub-menu {
  display: block !important;
  position: absolute;
  background: #333333;
  margin-top: 15px;
}

.sub-menu ul:hover {
  display: block !important;
}

.navbar-header ul li:hover .sub-menu ul {
  display: block;
  /* margin: 10px;  */
}

.sub-menu ul li:hover {
  display: block;
  background: #f5f5f7;
  color: black !important;
}

.sub-menu ul li a {
  color: #f5f5f7;
}

.navbar-header ul li:hover .sub-menu ul li {
  display: block !important;
  color: black;
  width: 150px;
  padding: 0 !important;
  border-radius: 0;
  text-align: center;
}

.sub-menu ul li a:hover {
  color: black;
} 
 <div class="navbar-header" style="padding: 0; margin: 0; ">
  <ul class="navbar-ul">
    <div class="main-menu-items">
      <li>
        <a routerLink="/home"><img src="../../../assets/xyz" class="navbar-logo" alt=""></a>
      </li>
      <!-- logo -->
      <!-- <li><a routerLink="/home">Home</a></li> -->
      <!-- <li><a routerLink="/aboutus">About Us</a></li> -->
      <li class="about-us-menu"><a routerLink="#">About Us</a>
        <div class="sub-menu">
          <ul id="about-sub-menu">
            <li>
              <a href="/aboutus/gallery">Gallery</a>
            </li>
            <li>
              <a href="/testimonials">Testimonials</a>
            </li>
            <li>
              <a href="/blog">Blogs</a>
            </li>
          </ul>
        </div>
      </li>
      <li class="courses-sub-menu"><a routerLink="/courses">Courses</a>
        <div class="sub-menu">
          <ul>
            <li>
              <a href="#">Science</a>
            </li>
            <li>
              <a href="#">Physics</a>
            </li>
            <li>
              <a href="#">Biology</a>
            </li>
            <li>
              <a href="#">Mathematics</a>
            </li>
            <li>
              <a href="#">Chemistry</a>
            </li>
            <li>
              <a href="#">Business Studies</a>
            </li>
            <li>
              <a href="#">Accountancy</a>
            </li>
            <li>
              <a href="#">Economics</a>
            </li>
            <li>
              <a href="#">Psychology</a>
            </li>
            <li>
              <a href="#">SAT/ACT</a>
            </li>
          </ul>
        </div>
      </li>

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

1. Я на самом деле не понимаю, в чем проблема и как ее воспроизвести. Более того, я не вижу ни «высоты навигационной панели», ни «навигационной секции», о которой вы говорите. Какова ваша цель? «Всегда в верхнем меню» слева с возможностью прокрутки содержимого справа?

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

3. jsfiddle.net/3hb2zkjd/5 взгляните на эту скрипку, может быть, это вам поможет. Я немного упростил ваш html/css. Я бы рекомендовал вам не определять классы несколько раз в вашем коде.. Я также удалил div, которые упаковывали ваши списки, и просто добавил классы в сами списки. Я не знаю, решит ли скрипка вашу проблему, но, возможно, вы сможете, по крайней мере, получить преимущество/представление об этом.

Ответ №1:

Ознакомьтесь с этими свойствами CSS, чтобы достичь желаемого результата.

 .main-menu-items {
  background: none;
  color: Black;
  padding: 12px 26px;
  font-size: 16px;
  border: none;
  cursor: pointer;
}


.dropdown {
  position: relative;
  display: inline-block;
  min-width: 160px;
}

.sub-menu {
  display: none;
  position: absolute;
  background-color: #f9f9f9;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
}

.sub-menu a {
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
}

.sub-menu a:hover {background-color: #f1f1f1}

.dropdown:hover .sub-menu {
  display: block;
  position: absolute;
  left: 100%;
  top: 0;
}

.nav-wrapper {
  display: block;
}
 
 <!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link rel="stylesheet" href="main.css">
</head>
<body>
  <div class="navbar-header">
    <div class="nav-wrapper">
      <div class="dropdown">
        <button class="main-menu-items">About Us</button>
        <div class="sub-menu">
          <a href="#">Gallery</a>
          <a href="#">Testimonials</a>
          <a href="#">Blogs</a>
        </div>
      </div>
    </div>
    <div class="nav-wrapper">
      <div class="dropdown">
        <button class="main-menu-items">Courses</button>
        <div class="sub-menu">
          <a href="#">Science</a>
          <a href="#">Physics</a>
          <a href="#">Biology</a>
          <a href="#">Mathematics</a>
          <a href="#">Chemistry</a>
          <a href="#">Business Studies</a>
          <a href="#">Accountancy</a>
          <a href="#">Economics</a>
          <a href="#">Psychology</a>
          <a href="#">SAT/ACT</a>
        </div>
      </div>
    </div>    
  </div>
</body>
</html>
Метки: ,