Warm tip: This article is reproduced from serverfault.com, please click

css html nav

Dropdown Nav Menu Appears on Right and Stacked Horizontally

发布于 2020-11-28 02:23:14

I'm trying to create a dropdown menu for one of the items in my nav bar. I based the code on this W3Schools example. Upon hover, the menu appears below the nav bar (as it should be) but it is 1) stacked horizontally rather than vertically and 2) appears to the far right on the page. I've look at similar questions here but haven't been able to figure out the problem in my code. Any help would be appreciated.

/* nav */

nav {
  display: flex;
  flex-wrap: wrap;
  padding: .25rem 0;
  color: #ffffff;
  font: 30px 'Roboto', sans-serif;
  margin: auto;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  overflow: hidden;
}

nav a {
  display: block;
  margin: 0 40px;
}


/* dropdown container */

.dropdown {
  float: none;
  position: relative;
  overflow: visibile;
}


/* dropdown button */

.dropdown .dropbtn {
  display: flex;
  font-size: 30px;
  border: none;
  outline: none;
  color: #ffffff;
  padding: inherit;
  background-color: inherit;
  font-family: inherit;
  margin: auto;
}


/* dropdown content (hidden by default */

.dropdown-content {
  display: none;
  position: absolute;
  margin-top: 10px;
  background-color: #ffffff;
  width: 250px;
  left: calc(50% - 125px);
}

.dropdown-content>a {
  color: black;
  text-align: left;
  border-bottom: 1px solid #009EDB;
}


/* show dropdown menu on hover */

.dropdown:hover .dropdown-content {
  display: block;
  float: left;
  margin: 0;
}

<nav class="justify-content-center">

  <a href="/Users/Samantha/Desktop/Website/about.html" alt="About">About</a>

  <section class="dropdown">
    <button class="dropbtn">
                        Work
                    </button>
    <section class="dropdown-content">
      <a href="/Users/Samantha/Desktop/Website/Articles/articles.html" alt="Articles" target="_blank">Articles and Presentations</a>
      <a href="/Users/Samantha/Desktop/Website/Articles/Series/New Case Flow/from-process-to-flow-series.html" alt="From Process to Flow Series" target="_blank">From Process to Flow Series</a>
    </section>
  </section>

  <a href="https://github.com/smlisk0630" alt="GitHub" target="_blank">Github</a>

  <a href="https://trailblazer.me/id/slisk" alt="Trailhead" target="_blank">Trailhead</a>


</nav>

Questioner

smlisk0630

Viewed

11

Merlin Fejzuli 2020-11-28 22:42:47

Problem number 1 was solved through Rody of the Frozen Peas answer.

For Problem number 2: You want to align the center of dropdown-content relative to it's parent. For that you want to shift dropdown-content to the left by half of it's width and then shift it a bit to the right by half of the width of the dropdown. Also the dropdown element needs to be relatively positioned otherwise the dropdown-content would be positioned realtive to the document. To make the dropdown-content visible you need to make dropdowns and the nav bars overflow visible.

nav {
    overflow: visible;
}

.dropdown {
    position: relative;
    overflow: visible;
}

.dropdown-content {
    position: absolute;
    width: 250px;
    left: calc(50% - 125px);
}

The reason this works is that you align the center of the dropdown-content with the left of dropdown by specifying left: -125px as you're shifting it to the left by half of the width of dropdown-content. To then align it with the center of dropdown you need to add 50% as it is absolutely positioned and will therefore use the parents width as reference and 50% of the parents width is the parents center.

smlisk0630 2020-11-28 14:32:13

I've edited my post with an updated screenshot and code. The alignment is now correct, but the dropdown elements are no longer visible.

Merlin Fejzuli 2020-11-28 14:44:59

I'm sorry I forgot that the nav bar was also hiding it's overflow. I've updated my answer accordingly. Also make sure to have no typos as the overflow attribute of the dropdown in your code snippet is set to visibile instead of visible.

热门github

1

A multi-platform library for OpenGL, OpenGL ES, Vulkan, window and input

2

Dev tool that writes scalable apps from scratch while the developer oversees the implementation

3

shadcn/ui, but for Svelte. ✨

4

The Python Risk Identification Tool for generative AI (PyRIT) is an open access automation framework to empower security professionals and machine learning engineers to proactively find risks in their generative AI systems.

5

Performance-portable, length-agnostic SIMD with runtime dispatch

6

ZK Credo

7

OpenCodeInterpreter: Integrating Code Generation with Execution and Refinement

8

Joplin - the secure note taking and to-do app with synchronisation capabilities for Windows, macOS, Linux, Android and iOS.

9

Mamba is a new state space model architecture showing promising performance on information-dense data such as language modeling, where previous subquadratic models fall short of Transformers. It is based on the line of progress on structured state space models, with an efficient hardware-aware design and implementation in the spirit of FlashAttention.

10

This repository contains System Design resources which are useful while preparing for interviews and learning Distributed Systems

11

Curso para aprender el lenguaje de programación Python desde cero y para principiantes. 75 clases, 37 horas en vídeo, código, proyectos y grupo de chat. Fundamentos, frontend, backend, testing, IA...

12

🎓 Path to a free self-taught education in Computer Science!

13

1️⃣🐝🏎️ The One Billion Row Challenge -- A fun exploration of how quickly 1B rows from a text file can be aggregated with Java

14

A collective list of free APIs

15

📚 Freely available programming books