主页 / 问题 / 1396023
Accepted
shaidullin2h
Asked:2022-09-01 22:55:26 +0000 UTC2022-09-01 22:55:26 +0000 UTC

标题下拉菜单

  • 772

向所有人致敬，有这样一个标题，在它下面有一个猫头鹰旋转木马滑块 在此处输入图像描述

当您单击任何项​​目时，应该可以使用多级菜单。页面变暗，菜单显示为带有子项的附加块。 在此处输入图像描述

（以红色突出显示出现的块）尝试通过列表中的列表和添加悬停来实现，但在出现时无法定位块。手风琴位置不正确。有人面临这样的工作，你能告诉我如何实现这样的菜单吗？什么可以更好地使用？

<!-- HEADER BEGIN -->
    <header class="header">
        <div class="logo">
        </div>
        <nav class="menu">
          <ul class="menu__list">
            <li>
              <a href="" class="menu__link">Пункт 1</a>
              <ul class="sub-menu__list">
                <li>
                  <a href="" class="sub-menu__link">Подпункт меню</a>
                </li>
                <li>
                  <a href="" class="sub-menu__link">Подпункт меню</a>
                </li>
                <li>
                  <a href="" class="sub-menu__link">Подпункт меню</a>
                </li>
                <li>
                  <a href="" class="sub-menu__link">Подпункт меню</a>
                </li>
                <li>
                  <a href="" class="sub-menu__link">Подпункт меню</a>
                </li>
              </ul>
            </li>
            <li>
              <a href="" class="menu__link">Пункт 1</a>
            </li>
            <li>
              <a href="" class="menu__link">Пункт 1</a>
            </li>
            <li>
              <a href="" class="menu__link">Пункт 1</a>
            </li>
            <li>
              <a href="" class="menu__link">Пункт 1</a>
            </li>
          </ul>
          
        </nav>
        

        
    </header>
    <!-- HEADER END -->

scss

.header {
font-weight: 500;
width: 100%;
min-height: 198px;
max-height: 288px;
color: white;



display: flex;
flex-direction: row;
align-items: center;
background-color: #000000;
font-size: 16px;
font-family: 'M PLUS 1p', sans-serif;


.logo {
    background: url(./img/logo.png);
    width: 42px;
    height: 50px;
    margin-right: 213px;
}

.menu {
    a {
        text-decoration: none;
    }
    li {
        list-style: none;
        position: relative;
    }
}

.menu__list {
    display: flex;
    >li {
        margin: 0px 10px 0px 0px;
        &:hover .sub-menu__list {
            
            display: flex;
            height: 90px;
            -ms-flex-wrap: wrap;
            flex-wrap: wrap;
            align-items: center;
            flex-direction: column;
        }
    }
}

.menu__link {
    color: #fff;
}

.sub-menu__list {
    display: none;
    position: absolute;
    left: 0;
    top: 15px;
    min-width: 400px;
    padding: 20px 0px 0px 0px;
    .sub-menu__list >li {
        background-color: #fff;
        margin: 142px;
    }
}

.sub-menu__link {
    
    color: #c91616;
}

}

//

javascript

1 个回答

  1. Best Answer

    看来这就是你想要的（全屏打开会更好）：

    .header {
  font-weight: 500;
  width: 100%;
  min-height: 198px;
  max-height: 288px;
  color: white;
  display: flex;
  flex-direction: row;
  align-items: center;
  background-color: #000000;
  font-size: 16px;
  font-family: 'M PLUS 1p', sans-serif;
}

.logo {
  background-color: red;
  width: 42px;
  height: 50px;
  margin-right: 213px;
}

.menu a {
  text-decoration: none;
}

.menu li {
  list-style: none;
  position: relative;
}

.menu__list {
  display: flex;
}

.menu__list>li {
  margin: 0 5px;
}

.menu__list>li:hover {
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  align-items: center;
  flex-direction: column;
}

.menu__link {
  color: #fff;
}

.menu__link:hover + .sub-menu__list,
.sub-menu__list:hover {
  display: flex;
  background-color: red;
}

.sub-menu__list {
  display: none;
  background-color: red;
  position: absolute;
  left: 0;
  top: 16px;
  padding: 20px 0px 0px 0px;
  box-shadow: 0 0 0 100vw rgba(0, 0, 0, .4);
}

.sub-menu__list>li {
  background-color: green;
  margin: 80px;
}

.sub-menu__link {
  color: blue;
}
    <header class="header">
  <div class="logo">
  </div>
  <nav class="menu">
    <ul class="menu__list">
      <li>
        <a href="" class="menu__link">Пункт 1</a>
        <ul class="sub-menu__list">
          <li>
            <a href="" class="sub-menu__link">Подпункт меню</a>
          </li>
          <li>
            <a href="" class="sub-menu__link">Подпункт меню</a>
          </li>
          <li>
            <a href="" class="sub-menu__link">Подпункт меню</a>
          </li>
          <li>
            <a href="" class="sub-menu__link">Подпункт меню</a>
          </li>
          <li>
            <a href="" class="sub-menu__link">Подпункт меню</a>
          </li>
        </ul>
      </li>
      <li>
        <a href="" class="menu__link">Пункт 2</a>
      </li>
      <li>
        <a href="" class="menu__link">Пункт 3</a>
      </li>
      <li>
        <a href="" class="menu__link">Пункт 4</a>
      </li>
      <li>
        <a href="" class="menu__link">Пункт 5</a>
      </li>
    </ul>

  </nav>



</header>

    • 2

相关问题