Search code examples
htmlcssnavigationscrollbardropdown

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

My code has two navigation bars. One in vertical and other in horizontal format.

The first issue:

I set the vertical bar such that it's scroll is active by this CSS code:

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

But, the scroll doesn't work despite height of the bar is more than screen size. You can see that:

enter image description here

The second issue:

I set a dropdown bar that is display: none by default and should be visible whenever user hovers on Solidity item. The item's ID is Solidity. But, it is visible in a limited area that whole of the bar is not visible:

enter image description here

It's code is:

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

and

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

I don't know what the problem is and how I can eliminate that. Please provide a solution. Thank you.

Whole code:

<!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>
Solution

  • I did refactor your code, for improve it. And fixed issues you wanted to solve.

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