Question 285025 in Html Question posted in
Some basic documentation can be found here.

Html – My navigation links are not aligning properly on the right

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.

Tags:

2

Answers


  1. 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.

    Login or Signup to reply.
  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/

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search