CSS将菜单与子菜单正确对齐-整个菜单未居中

Question

我正在创建导航栏的基础。菜单中可以有多个子菜单。当单击带有子菜单的菜单项时，子菜单将显示在下面。除了导航没有占据屏幕的整个宽度外，我大部分时间都在工作。当我试图将其居中时，子菜单会断开。我不完全理解我在做什么，我需要一些帮助来了解这里发生了什么以及如何解决它。谢谢你的帮助。

更好地理解的菜单

nav {
display: flex;
font-weight: bold;
}
div {
display: inline-block;
}
li {
list-style: none;
}

li:not(.subMenu){
padding: 10px 20px;
}
.dropdown {
position: absolute;
}

<header>
<nav>
<ul>
<div>
<li id="About Me">About Me</li>
<ul class="dropdown">
<li id="Test" class="subMenu">Test</li>
<li id="Test2" class="subMenu">Test2</li>
</ul>
</div>
<div>
<li id="Projects">Projects</li>
</div>
<div>
<li id="Temp">Temp</li>
</div>
<div>
<li id="Helloooo">Helloooo</li>
<ul class="dropdown">
<li id="Test44" class="subMenu">Test44</li>
</ul>
</div>
</ul>
</nav>
</header>

编辑：删除"；显示：flex"；或者试图使用正当内容或对齐项目似乎没有任何作用

Answer 1

给你。。。

主要问题在于定位。如果希望子级具有position: absolute;，则需要将position: relative;设置为父级。除此之外，还需要添加一点CSS。

nav {
display: flex;
font-weight: bold;
}
ul {
width: 100%;
display: flex;
justify-content: center;
}
ul > div {
display: inline-block;
}
li {
list-style: none;
display: block;
text-align: center;
}
li:not(.subMenu) {
padding: 10px 20px;
}
.dropdown {
display: block;
padding: 0;
}
#wrapper {
position: relative;
}
#test,
#test2,
#test44 {
position: absolute;
}

<header>
<nav>
<ul>
<div id="wrapper">
<li id="About Me">About Me</li>
<ul class="dropdown">
<li id="Test" class="subMenu">Test</li>
<li id="Test2" class="subMenu">Test2</li>
</ul>
</div>
<div id="wrapper">
<li id="Projects">Projects</li>
</div>
<div id="wrapper">
<li id="Temp">Temp</li>
</div>
<div id="wrapper">
<li id="Helloooo">Helloooo</li>
<ul class="dropdown">
<li id="Test44" class="subMenu">Test44</li>
</ul>
</div>
</ul>
</nav>
</header>

Answer 2

您在flexbox中有它，所以您需要指定容器的位置。类似的东西

nav {
display: flex;
justify-content: center;
font-weight: bold;
}

Answer 3

您需要在nav标签中为ul标签提供显示灵活性，因为nav只有一个子标签然后给justify-content: center进行标记，它将集中所有子

Answer 4

感谢@Cervus camelopardalis的回答，帮助

这是我的解决方案，没有更改html，但将css更改为：

nav {
display: flex;
font-weight: bold;
}
ul {
width: 100%;
display: flex;
justify-content: center;
}
li {
list-style: none;
text-align: center;
}

li:not(.subMenu){
padding: 10px 20px;
}
.dropdown {
display: block;
padding: 0;
}