I need the navbar to dropdown on icon hover-CodePudding

i need the navbar to display the dropdown div when i hover on the .nav-right.I have tried using position:absolute for the .nav-dropdown, but it just keeps going inside the nav itself and i want it underneath. Also, the .nav-right does not even also display the dropdown, what am i doing wrong?

``html

            <div >
                <span ></span>
            </div><!--nav left-->

            <div >
                <ul >
                    <li ><a  href="#">About Project</a></li>
                    <li ><a  href="#">Portfolio</a></li>
                    <li ><a  href="#">Shop</a></li>
                    <li ><a  href="#">Collections</a></li>
                </ul>
            </div><!--nav middle-->

            <div >
                <div >
                    <img src="" />
                </div><!--user image-->

                <div >
                    <span ></span>
                    <span ></span>
                </div><!--lines-->
              
            </div><!--nav right-->

            <div >
                dropdown nav bar
            </div><!--nav dropdown-->


         
    </nav><!--nav---->

``css

.nav {
  height: auto;
  width: 100%;
  position: fixed;
  top: 0;
  align-items: center;
  z-index: 1;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  padding: 0 80px;
  box-sizing: border-box;
  border: solid 1px red;
}
.nav .nav-left {
  display: flex;
  flex-basis: 15%;
  justify-content: left;
  align-items: center;
  height: 70px;
  border: solid 1px green;
}
.nav .nav-left span {
  height: 30px;
  width: 30px;
  background-color: #000;
}
.nav .nav-middle {
  height: 70px;
  flex-basis: 65%;
  display: flex;
  align-items: center;
  border: solid 1px blue;
}
.nav .nav-middle ul {
  display: flex;
  list-style: none;
  padding: 0;
  margin: 0;
}
.nav .nav-middle ul li {
  margin-right: 70px;
  border: Solid 1px red;
}
.nav .nav-right {
  display: flex;
  height: 70px;
  border: solid 1px purple;
  flex-basis: 20%;
  align-items: center;
  justify-content: right;
}
.nav .nav-right .user-image {
  height: 40px;
  width: 40px;
  background: #000;
  border-radius: 50%;
  margin-right: 40px;
}
.nav .nav-right .lines .line {
  background-color: #000;
  width: 30px;
  height: 2px;
  display: block;
  margin-bottom: 5px;
}
.nav .nav-dropdown {
  width: 100%;
  display: none;
  position: absolute;
  top: 0;
  height: 100px;
  background-color: #000;
  color: #fff;
  border: solid 3px green;
  box-sizing: border-box;
}

.nav .nav-right:hover   .nav-dropdown {
  display: block;
}


.nav-link {
  color: #000;
  text-decoration: none;
  font-family: selectric, helvetica, arial;
  transition: linear 0.3s;
}
.nav-link:hover {
  color: #484848;

CodePudding user response：

Set top css value in pixels for the nav-dropdown, to position it where you like to position it.

.nav {
  height: auto;
  width: 100%;
  position: fixed;
  top: 0;
  align-items: center;
  z-index: 1;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  padding: 0 80px;
  box-sizing: border-box;
  border: solid 1px red;
}

.nav .nav-left {
  display: flex;
  flex-basis: 15%;
  justify-content: left;
  align-items: center;
  height: 70px;
  border: solid 1px green;
}

.nav .nav-left span {
  height: 30px;
  width: 30px;
  background-color: #000;
}

.nav .nav-middle {
  height: 70px;
  flex-basis: 65%;
  display: flex;
  align-items: center;
  border: solid 1px blue;
}

.nav .nav-middle ul {
  display: flex;
  list-style: none;
  padding: 0;
  margin: 0;
}

.nav .nav-middle ul li {
  margin-right: 70px;
  border: Solid 1px red;
}

.nav .nav-right {
  display: flex;
  height: 70px;
  border: solid 1px purple;
  flex-basis: 20%;
  align-items: center;
  justify-content: right;
}

.nav .nav-right .user-image {
  height: 40px;
  width: 40px;
  background: #000;
  border-radius: 50%;
  margin-right: 40px;
}

.nav .nav-right .lines .line {
  background-color: #000;
  width: 30px;
  height: 2px;
  display: block;
  margin-bottom: 5px;
}

.nav .nav-dropdown {
  width: 100%;
  display: none;
  position: absolute;
  top: 100px;
  height: 100px;
  background-color: #000;
  color: #fff;
  border: solid 3px green;
  box-sizing: border-box;
}

.nav .nav-right:hover .nav-dropdown {
  display: block;
}

.nav-link {
  color: #000;
  text-decoration: none;
  font-family: selectric, helvetica, arial;
  transition: linear 0.3s;
}

.nav-link:hover {
  color: #484848;
}

<nav class='nav'>
  <div >
    <span ></span>
  </div>
  <!--nav left-->

  <div >
    <ul >
      <li ><a  href="#">About Project</a></li>
      <li ><a  href="#">Portfolio</a></li>
      <li ><a  href="#">Shop</a></li>
      <li ><a  href="#">Collections</a></li>
    </ul>
  </div>
  <!--nav middle-->

  <div >
    <div >
      <img src="" />
    </div>
    <!--user image-->

    <div >
      <span ></span>
      <span ></span>
    </div>
    <!--lines-->

  </div>
  <!--nav right-->

  <div >
    dropdown nav bar
  </div>
  <!--nav dropdown-->



</nav>

CodePudding user response：

Move nav-dropdown to inside nav-right. This locates the dropdown as a child to nav-right

<div >
      <div >
          <img src="" />
      </div><!--user image-->

      <div >
          <span ></span>
          <span ></span>
      </div><!--lines-->

      <div >
        dropdown nav bar
    </div><!--nav dropdown-->
  </div><!--nav right-->

Add position:relative to nav-right. This means we can position nav-dropdown using position:absolute.

.nav-right {
  display: flex;
  height: 70px;
  border: solid 1px purple;
  flex-basis: 20%;
  align-items: center;
  justify-content: right;
  position:relative;
}

Because nav-dropdown is positioned:absolute, we can use the top: property to move the top down by however we want, so set this to, say: 4rem

.nav-dropdown {
  width: 100%;
  display: none;
  position: absolute;
  top: 4rem;
  height: 100px;
  background-color: #000;
  color: #fff;
  border: solid 3px green;
  box-sizing: border-box;
}

Change the .nav-right:hover selector to select .nav-dropdown like this which displays the dropdown when we hover over .nav-right.

.nav-right:hover > .nav-dropdown {
  display: block;
}

Basically what we're doing is putting a child elemnt in your navbar-right that we hide on document load. We position nav-right as position:relative which does nothing for .nav-right but allows us to positon the dropdown relative to this. We position nav-dropdown as absolute which doesn't interrupt your navbar rendering and we can then use the css properties left, top, bottom and right (using only the ones we need) to position the dropdown where we like. In this case we use 'top' to push the thing down and make it look like a menu.

There are some good examples here: https://www.w3schools.com/css/css_dropdowns.asp and here https://css-tricks.com/solved-with-css-dropdown-menus/

Good luck!