0

I currently have a site where my navigation links are aligned to the right. I made some changes to one of the navigation links so that when you hover over it, additional nav links pop up. However, I'm not sure what went wrong, but when I put in the styling for the dropdown nav link, it's now floating to the very right. Below is my HTML code:

.floatnav {
  float: right;
}


/* Navbar container */

.floatnav a {
  display: inline-block;
  text-align: center;
  padding: 0 14px;
  text-decoration: none;
}


/* The dropdown container */

.dropdown {
  float: right;
  overflow: hidden;
}


/* Dropdown button */

.dropdown .dropbtn {
  font-size: 18px;
  border: none;
  outline: none;
  color: white;
  padding: 0 16px;
  background-color: inherit;
  font-family: inherit;
  margin: 0;
}

.floatnav a:hover,
.dropdown:hover .dropbtn {
  background-color: #ddd;
  color: black;
}


/* Dropdown content (hidden by default) */

.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f9f9f9;
  min-width: 160px;
  box-shadow: 0px 18px 16px 0px rgba(0, 0, 0, 0.2);
  z-index: 1;
  color: black;
}


/* Links inside the dropdown */

.dropdown-content a {
  float: none;
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
  text-align: left;
}


/* Add a grey background color to dropdown links on hover */

.dropdown-content a:hover {
  background-color: #ddd;
}


/* Show the dropdown menu on hover */

.dropdown:hover .dropdown-content {
  display: block;
}
<div class="floatnav">
  <a href="index.html">Heading 1</a>
  <div class="dropdown">
    <button class="dropbtn">Heading 2</button>
    <div class="dropdown-content">
      <a href="lostark.html">Subheading 1</a>
    </div>
  </div>
  <a href="support.html">Heading 3</a>
  <a href="about.html">Heading 4</a>
</div>

And currently, the result is this:

Heading 1 Heading 3 Heading 4 Heading 2

So heading 2 is currently at the very end even though I had put both the navigation <div> and the dropdown nav link <div> to float right.

Would anyone be able to help me be able to get the heading numbers to align? I'm hoping to have the headings be 1, 2, 3 and 4 last.

2 Answers 2

0

The <a> are on the right because of the parent container. But since you are telling .dropdown to float right, this will be the "most" right of the children.

Remove the float: right from .dropdown and also remove the float: none from the <a>

I also recommend having a class for the children of .floatnav

enter image description here

https://jsfiddle.net/MissBee/4gre6mLu/6/

0

You are forcing the .dropdown class to float right even after it is already being pushed to the right with the .floatnav class. If you remove the float:right from .dropdown it will make Heading 2 fall in line with the rest of the inline-block.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.