"overflow-y" 的滚动和下拉栏无法正常工作

Question

我的代码有两个导航栏。一个是垂直格式，另一个是水平格式。

第一期：

我设置了垂直条，它的滚动是通过这个 CSS 代码激活的：

ul{
              list-style-type: none;
              text-align: center;
              text-transform: capitalize;
              overflow-y: scroll;
              width: 250px;
              height: auto;
              position: relative;
              left: -50px;
              top: -62px;
          }

但是，尽管栏的高度大于屏幕尺寸，但滚动不起作用。你可以看到：

第二期：

我设置了一个默认为 display: none 的下拉栏，只要用户将鼠标悬停在 Solidity 项目上，它就应该可见。该项目的 ID 是 Solidity。但是，在有限的区域内可见整个酒吧是不可见的：

它的代码是：

 div.dropdownbar{
            display: none;
            color: black;
            width: 200px;
            overflow-y: hidden;
            position: absolute;
            left: 581px;
            z-index: +1;
          }

和

#Solidity:hover div.dropdownbar{
              display: block;
          }

我不知道问题出在哪里，也不知道如何解决。请提供解决方案。谢谢。

完整代码：

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>Text Learning</title>
        <style>
          *{
              font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
          }
          ul{
              list-style-type: none;
              text-align: center;
              text-transform: capitalize;
              overflow-y: scroll;
              width: 250px;
              height: auto;
              position: relative;
              left: -50px;
              top: -62px;
          }
          li{
              background-color: rgb(74, 183, 246);
              padding: 15px;
              font-weight: bold;
          }
          li.home{
              background-color: blue;
              color: white;
              padding: 10px;
              font-weight: bold;
          }
          li:hover:not(li.home){
              background-color: rgb(0, 90, 173);
              color: white;
          }
          header{
              background-color: rgb(127, 203, 246);
              color: white;
              text-align: center;
              font-size: 4vw;
              padding: 35px;
              font-weight: bold;
              position: relative;
              left: -10px;
              top: -10px;
          }
          ul.horizontalbar{
              display: inline-block;
              background-color: rgb(55, 136, 184);
              text-align: center;
              text-transform: capitalize;
              width: 100%;
              position: relative;
              top: -26px;
              left: -15px;
          }
          li.horizontalitem{
              display: inline-block;
              background-color: rgb(55, 136, 184);
              color: white;
              padding: 15px;
              font-weight: bold;
          }
          div.dropdownbar{
            display: none;
            color: black;
            width: 200px;
            overflow-y: hidden;
            position: absolute;
            left: 581px;
            z-index: +1;
          }
          a.dropdownitem{
            background-color: rgb(202, 225, 238);
            padding: 15px;
          }
          #Solidity{
              display: inline-block;
          }
          #Solidity:hover div.dropdownbar{
              display: block;
          }
         
        </style>
    </head>
    <body>  
        <header>
            My School
        </header>
        <ul class="horizontalbar">
            <li class="horizontalitem">HTML</li>
            <li class="horizontalitem">CSS</li>
            <li class="horizontalitem">JavaScript</li>
            <li class="horizontalitem" id="Solidity">Solidity
                <div class="dropdownbar">
                        <a class="dropdownitem">Fundamentals</a>
                        <a class="dropdownitem">External Call</a>
                        <a class="dropdownitem">Interface</a>
                        <a class="dropdownitem">Abstract Contract</a>
                        <a class="dropdownitem">Secure Coding</a>
                </div>
            </li>
            <li class="horizontalitem">Vyper</li>
            <li class="horizontalitem">Truffle</li>
            <li class="horizontalitem">Mythril</li>
        </ul>
       <ul>
           <li class="home">HTML</li>
           <li>CSS</li>
           <li>SVG</li>
           <li>JavaScript</li>
           <li>ReactJS</li>
           <li>NodeJS</li>
           <li>ExpressJS</li>
           <li>Web3JS</li>
           <li>EthereumJS</li>
           <li>EthersJS</li>
           <li>Solidity</li>
           <li>Vyper</li>
           <li>Truffle</li>
           <li>Mythril</li>
           <li>Slither</li>
       </ul>
    </body>
</html>

Answer 1

我确实重构了你的代码，以改进它。并修复了您想解决的问题。

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
}

body {
  width: 100%;
  height: 100%;
  display: grid;
  grid-template-columns: 180px 1fr;
  grid-template-rows: 150px 50px 1fr;
  grid-template-areas:
    'header header'
    'horizontalbar horizontalbar'
    'verticalbar main';
}

ul {
  list-style-type: none;
}
li {
  padding: 15px;
  font-weight: bold;
}
li.home {
  background-color: blue;
  color: white;
  padding: 10px;
  font-weight: bold;
}
li:hover:not(li.home) {
  background-color: rgb(0, 90, 173);
  color: white;
}

header {
  grid-area: header;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: rgb(127, 203, 246);
  color: white;
  font-size: 4vw;
  font-weight: bold;
}

ul.horizontalbar {
  grid-area: horizontalbar;
  align-self: center;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  background-color: rgb(55, 136, 184);
}

li.horizontalitem {
  width: max-content;
  background-color: rgb(55, 136, 184);
  color: white;
  padding: 15px;
  font-weight: bold;
}

li.horizontalitem#solidity {
  position: relative;
}

.dropdownbar {
  display: none;
  flex-direction: column;
  color: black;
  width: max-content;
  height: max-content;
  position: absolute;
  left: 50%;
  top: 50px;
  transform: translateX(-50%);
}
a.dropdownitem {
  background-color: rgb(202, 225, 238);
  padding: 15px;
}
#solidity {
  display: flex;
}
#solidity:hover div.dropdownbar {
  display: flex;
}

ul.verticalbar {
  grid-area: verticalbar;
  height: calc(100vh - 200px); /* 150px + 50px // header + menu height */
  min-height: 100%;
  display: flex;
  flex-direction: column;
  text-align: center;
  overflow-y: auto;
  background-color: rgb(74, 183, 246);
}

<header>My School</header>
    <ul class="horizontalbar">
      <li class="horizontalitem">HTML</li>
      <li class="horizontalitem">CSS</li>
      <li class="horizontalitem">JavaScript</li>
      <li class="horizontalitem" id="solidity">
        Solidity
        <div class="dropdownbar">
          <a class="dropdownitem">Fundamentals</a>
          <a class="dropdownitem">External Call</a>
          <a class="dropdownitem">Interface</a>
          <a class="dropdownitem">Abstract Contract</a>
          <a class="dropdownitem">Secure Coding</a>
        </div>
      </li>
      <li class="horizontalitem">Vyper</li>
      <li class="horizontalitem">Truffle</li>
      <li class="horizontalitem">Mythril</li>
    </ul>
    <ul class="verticalbar">
      <li class="home">HTML</li>
      <li>CSS</li>
      <li>SVG</li>
      <li>JavaScript</li>
      <li>ReactJS</li>
      <li>NodeJS</li>
      <li>ExpressJS</li>
      <li>Web3JS</li>
      <li>EthereumJS</li>
      <li>EthersJS</li>
      <li>Solidity</li>
      <li>Vyper</li>
      <li>Truffle</li>
      <li>Mythril</li>
      <li>Slither</li>
    </ul>

"overflow-y" 的滚动和下拉栏无法正常工作

Scroll of "overflow-y" and Dropdown bar doesn't work correctly

html

css

navigation

scrollbar

dropdown