CSS Dropdown does not appear underneath the button it's supposed to

HTML & CSS
,
1

I’m trying to create a CSS dropdown menu. My version is based most closely on csswizardry. w3schools’ version is in html4, and css-tricks has their own version that didn’t work for me. This is what it looks like.

1009×352 22.8 KB

Here is the nav HTML:

<nav>
  <ul>
    <a class="navLogo" href="index.php">Rambling with Purpose</a>
    <li><a class="nav" href="about.php">about </a></li>
    <li><a class="nav" href="contact.php">contact</a></li>
    <li><a class="nav" href="articles.php">articles</a></li>
    <li><a class="nav" href="#">creations</a> 
      <ul>
        <li><a class="nav" href="creations_channel_ops.php">channel ops</a></li>
        <li><a class="nav" href="creations_fleet_fighter.php">fleet fighter</a></li>
        <li><a class="nav" href="creations_snake.php">snake</a></li>
      </ul>
    </li>
    <li><a class="nav" href="index.php">home</a></li>
  </ul>
</nav>

Here is the nav CSS:

nav ul ul {
  background: #00137f;
  position: absolute;
  display: none;
}

nav ul ul li {
  display: block;
  position: relative;
}

nav li:hover ul {
  display: block;
}

The navbar uses fixed positioning. It has some children: an anchor floated left and styled to be the site name, and multiple links floated to the left inside a right-floated container (to avoid reversing the source order). Nav li are inline.

How can this dropdown work?
What is it that makes dropdowns actually line up and drop under their anchoring elements?

Thank you.

2

Not the greatest but maybe this will help you out?

https://jsfiddle.net/Strider64/9emg3f04/11/

3

Unfortunately, I can’t apply any meaningful changes from your code to mine. I think the fundamental issue is that I’m floating nav ul to the right and floating all links to the left inside it, which is unusual because I’m floating to the right. My nav is fixed. These things appear to be different or not exist in your version. I appreciate your helpful reply, though.

4

If you can post a “working page” with the code that demonstrates the problem, we can do a better job of addressing the issue and avoid a lot of guessing.

5

Here’s a fiddle: https://jsfiddle.net/t8gx1o5y/

6

I updated your JsFiddle: https://jsfiddle.net/t8gx1o5y/1/

It’s actually the same as the one @Pepster64 posted if you study it. I just went with your present code.

The update:


nav > ul > li + li { /* the nav's direct (>) ul-child and then the ul's direct (>) item-children that is next after one (+) other item-child */
  float: right;
  position: relative; /* becomes the container of the AP ul child */
}

/***************************************************************** Dropdown */

nav ul ul {
  background: #00137f;
  position: absolute; /* will refer its coordinates to nearest positioned parent */
/*  display: none; */
  top: 100%; /* the whole item height from top places the list-top close to the item bottom, the usual technique = no gap at any height */
  left: -9999px; /* the usual hiding technique, sometimes more reliable */
}

nav li:hover ul {
/*  display:  block; */
  left: 0;
}
1 Like
7

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.