文章/答案/技术大牛

发布

社区首页 >问答首页 >滚动"overflow-y“和下拉栏不能正常工作

问滚动"overflow-y“和下拉栏不能正常工作
EN

Stack Overflow用户

提问于 2021-08-01 08:31:59

回答 1查看 36关注 0票数 0

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

第一个问题：

我设置了竖条，这样它的滚动就会被下面的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>

html

css

navigation

scrollbar

dropdown

回答 1

Stack Overflow用户

回答已采纳

发布于 2021-08-01 11:29:09

我确实重构了你的代码，以改善它。解决了你想要解决的问题。

* {
  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>

票数 1

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/68608731

复制

相似问题

问滚动"overflow-y“和下拉栏不能正常工作
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问滚动"overflow-y“和下拉栏不能正常工作EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问滚动"overflow-y“和下拉栏不能正常工作
EN