Day 340

Finished the second project of this course.  Some things I am not getting though...
#CodingPhase #TheCodingWay #365CodingPhaseChallenge

**********

* {
  box-sizing: border-box;
}

.container {
  max-width: 800px;
  margin: 50px auto;

  .menu {
    background: black;
    color: white;
    padding: 0;
    margin: 0 auto;
    cursor: pointer;

    .main {
      border: 1px solid #000;
    }

    li {
      border: 1px solid #000;
      display: inline-block;
      list-style: none;
      padding: 20px;
      margin: 0 -3px;
      position: relative;
      transition: all 0.3s ease-in-out;
      &:hover {
        & > ul.first {
          visibility: visible;
          opacity: 1;
        }
      }

      ul.first {
        background: red;
        position: absolute;
        top: 56px;
        left: -1px;
        width: 114px;
        visibility: hidden;
        opacity: 0;
        transition: all 0.3s ease-in-out;

        li {
          display: block;
          &:hover {
            & > ul.second {
              visibility: visible;
              opacity: 1;
            }
          }

          ul.second {
            background: blue;
            position: absolute;
            top: -1px;
            left: 121px;
            width: 120px;
            visibility: hidden;
            opacity: 0;
            transition: all 0.3s ease-in-out;

            li {
              // display: block;
              &:hover {
                & > ul.third {
                  visibility: visible;
                  opacity: 1;
                }
              }

              ul.third {
                background: green;
                position: absolute;
                top: -1px;
                left: 127px;
                width: 121px;
                visibility: hidden;
                opacity: 0;
                transition: all 0.3s ease-in-out;

                li {
                  // display: block;
                }
              }
            }
          }
        }
      }
    }
  }
}