Question

我的菜单栏有以下HTML代码段：

#menubar {
  display: block;
  background: #FFFFFF;
}

#menubar ul li a.menubutton {
  display: none;
  /* dont show burger symbol (mobile menu symbol) */
}

#menubar ul {
  display: block;
  width: 2em;
  /* restrict burger symbol */
  padding: 0.9em;
}

#menubar ul li {
  display: inline;
}

#menubar ul li ul li {
  display: none;
}


/*Header*/

header {
  display: block;
  background: #2F2C2C;
  text-align: center;
}


/* Navigation */

nav {
  display: block;
  height: 2.5em;
  background: #FFFFFF;
  text-align: center;
}

nav ul {
  display: block;
}

nav ul li {
  display: inline;
  margin: 0em 0.188em 0em 0.188em;
}

nav ul li a {
  color: #454040;
  font-size: 1.125em;
  line-height: 2.5em;
  padding: 0.563em 0.938em 0.375em 0.983em;
  transition: background 0.2s;
  /* nice transition effect */
  -webkit-transition: background 0.2s;
}

nav ul li a:hover {
  background: #DBD9D8;
  border-bottom: 0.188em solid #FF0000;
}

nav ul li a.active {
  border-bottom: 0.188em solid #E7590B;
}

nav ul li ul {
  display: none;
}

nav ul li:hover ul.submenu {
  text-align: center;
  position: fixed;
  display: block;
  margin-left: 40%;
}

nav ul li ul li:hover {
  background: #DBD9D8;
  border-bottom: 0.188em solid #FF0000;
}

<nav class="nav">
  <ul>
    <li><a href="./index.html" class="active">Start</a></li>
    <li><a href="./meetings.html">Termine</a></li>
    <li><a href="./organisation.html">Organisation</a>
      <ul class="submenu">
        <li><a href="./organisation/page1.html">Page1</a></li>
        <li><a href="./organisation/page2.html">Page2</a></li>
        <li><a href="./organisation/page3.html">Page3</a></li>
      </ul>
    </li>
    <li><a href="./about.html">About</a>
      <ul class="submenu">
        <li><a href="./about/page1.html">Page1</a></li>
        <li><a href="./about/page2.html">Page2</a></li>
        <li><a href="./about/page3.html">Page3</a></li>
      </ul>
    </li>
    <li><a href="./contact.html">Contact</a></li>
  </ul>
</nav>

ul #submenu会悬停显示。

我使用left: 40%规则中的nav ul li:hover ul.submenu设法使子菜单与整个页面居中。但是，我想将子菜单定位在其父组件的中心，因此以组织为例，我希望第2页子菜单以父组织的字段为中心，并且大致相同。

如何实现相对于父组件居中？

Answer 1

将position: relative添加到具有子菜单的菜单项（即nav ul li选择器），并将子菜单的position: fixed更改为position: absolute，即{{1 }}选择器。

这会使子菜单位置相对于其父菜单（主菜单项）“相对”，因此您应相应地调整子菜单CSS规则中的nav ul li:hover ul.submenu和left设置。

top

#menubar {
  display: block;
  background: #FFFFFF;
}

#menubar ul li a.menubutton {
  display: none;
  /* dont show burger symbol (mobile menu symbol) */
}

#menubar ul {
  display: block;
  width: 2em;
  /* restrict burger symbol */
  padding: 0.9em;
}

#menubar ul li {
  display: inline;
}

#menubar ul li ul li {
  display: none;
}


/*Header*/

header {
  display: block;
  background: #2F2C2C;
  text-align: center;
}


/* Navigation */

nav {
  display: block;
  height: 2.5em;
  background: #FFFFFF;
  text-align: center;
}

nav ul {
  display: block;
}

nav ul li {
  display: inline;
  margin: 0em 0.188em 0em 0.188em;
  position: relative;
}

nav ul li a {
  color: #454040;
  font-size: 1.125em;
  line-height: 2.5em;
  padding: 0.563em 0.938em 0.375em 0.983em;
  transition: background 0.2s;
  /* nice transition effect */
  -webkit-transition: background 0.2s;
}

nav ul li a:hover {
  background: #DBD9D8;
  border-bottom: 0.188em solid #FF0000;
}

nav ul li a.active {
  border-bottom: 0.188em solid #E7590B;
}

nav ul li ul {
  display: none;
}

nav ul li:hover ul.submenu {
  text-align: center;
  position: absolute;
  display: block;
  left: -50%;
}

nav ul li ul li:hover {
  background: #DBD9D8;
  border-bottom: 0.188em solid #FF0000;
}

Answer 2

嗨，我刚刚读了你的问题。因此，您将必须使用自己的类名来实现。但这是将您的孩子元素置于各自父母内部的中心。

.child-class{
  width:max-content;
  margin:0px auto;
}

要使其正常工作，必须具有一定的宽度。这将自动居中对齐div或您正在使用的任何标签。

我建议将此方法放在相对位置上，因为使用此方法的真正方便之处在于，即使不同的li标签的宽度不同，该方法也将使内容均匀居中对齐。这对于移动优化很方便。：）

CSS将子菜单与父元素对齐

2 个答案: