How to set up Asus RT-N66U in bridge mode with wired connection to main router?

Question

I have a menu with a dropdown that I've centered in the page. As I've positioned it absoutely, when the dropdown is opened, the menu moves upwards (to account for the increased height due to the menu being open).

I cannot quite work out what a better way around this is? The ideal behaviour is that before the dropdown is open, the menu is perfectly centered, and then when a dropdown is opened, the top of the menu stays in place.

I'm looking to see if there is a CSS only method of maintaining the positioning. Otherwise, I'll implement some JS to position the menu on load.

var dropdown = document.getElementById("dropdown");

var show = false;

function showDropdown() {
  var dropdownList = document.getElementById("dropdownList");
  if (show) {
    dropdownList.classList.remove("show");
    show = false;
  } else {
    dropdownList.classList.add("show");
    show = true;
  }
}

dropdown.addEventListener("click", showDropdown);

.parent {
  height: 100vh;
  width: 100vw;
  background-color: #aaa;
}

.list {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}

.dropdown > ul {
  display: none;
}

.dropdown > ul.show {
  display: block;
}

<div class="parent">
  <ul class="list">
    <li class="dropdown"><a href="#" id="dropdown">Item One</a>
      <ul id="dropdownList">
        <li>Dropdown 1</li>
        <li>Dropdown 2</li>
      </ul>
    </li>
    <li>Item Two</li>
    <li>Item Three</li>
  </ul>
</div>

Solution

Click Administration in the left menu and select Access Point(AP) mode:

In Access Point (AP) mode, RT-N66U connects to a wireless router through an Ethernet cable to extend the wireless signal coverage to other network clients. In this mode, the firewall, IP sharing, and NAT functions are disabled by default.

...and of course press the Save button.

Comments

[activout.se]

I suggest only asking one question at a time.

[CircularRecursion]

Thanks but as you can see the dropdown covers the over two items. I guess my terminology was slightly off. The content is to be treated like an accordion. So "Item Two" and "Item Three" should move down when "Item One" is open.

[cseitz]

Are referring to the thing moving up a little? That occurs because you vertically centered your content. Consider using margin-top instead of translate. When your content is vertically centered, making it taller would obviously push it upward.

[CircularRecursion]

Yes I'm referring to that. That's the question though. I want my content to be vertically centered before showing the hidden content. And then keep that positioning when the hidden content is open. I wasn't sure if it was possible in just CSS? I could try set a margin, but I don't know the height.

[cseitz]

Updated, let me know if that solves your problem.

[CircularRecursion]

Thanks but not really. The margin doesn't vertically center the ul.

[cseitz]

I'm sorry that what you want cannot be done the way you want it to. You can write some code to dynamically assign margin-top at runtime based on the height of the list, or by using margin-top: calc(50vh - (half of the height of the list in pixels))