html - 如何对齐下拉菜单

Question

我基本上是从 Drop-down menu that opens up/upward with pure css 复制/粘贴代码

body {
  padding: 3em;
}

#menu>li:hover ul {
  display: block;
}

#menu * {
  padding: 0;
  margin: 0;
  font: 12px georgia;
  list-style-type: none;
}

#menu {
  float: center;
  text-align: center;
  line-height: 10px;
}

#menu a {
  display: block;
  text-decoration: none;
  color: #3B5330;
}

#menu a:hover {
  background: #B0BD97;
}

#menu ul {}

#menu ul li ul li a:hover {
  background: #ECF1E7;
  padding-left: 9px;
  border-left: solid 1px #000;
}

#menu ul li ul li {
  width: 140px;
  border: none;
  color: #B0BD97;
  padding-top: 3px;
  padding-bottom: 3px;
  padding-left: 3px;
  padding-right: 3px;
  background: #B0BD97;
  z-index: 1;
}

#menu ul li ul li a {
  font: 11px arial;
  font-weight: normal;
  font-variant: small-caps;
  padding-top: 3px;
  padding-bottom: 3px;
}

#menu ul li {
  float: left;
  width: 146px;
  font-weight: bold;
  border-top: solid 1px #283923;
  border-bottom: solid 1px #283923;
  background: #979E71;
}

#menu ul li a {
  font-weight: bold;
  padding: 15px 10px;
}

#menu li {
  position: relative;
  float: left;
}

#menu ul li ul,
#menu:hover ul li ul,
#menu:hover ul li:hover ul li ul {
  display: none;
  list-style-type: none;
  width: 140px;
  bottom: 0;
}

#menu:hover ul,
#menu:hover ul li:hover ul,
#menu:hover ul li:hover ul li:hover ul {
  display: block;
}

#menu:hover ul li:hover ul li:hover ul {
  position: absolute;
  margin-left: 145px;
  margin-top: -22px;
  font: 10px;
}

#menu:hover ul li:hover ul {
  position: absolute;
  margin-top: 1px;
  font: 10px;
}

#menu>ul>li:hover>ul {
  bottom: 100%;
  border-bottom: 1px solid transparent
}

<iframe style="width:100%">padding</iframe>
<div id="menu" style="text-align:center; float: center; width: 100%">
  <ul>
    <li>
      <center>item1</center>
      <ul>
        <li><a href="f1.html">A</a></li>
        <li><a href="f2.html">B</a></li>
        <li><a href="f3.htmll">C</a></li>
      </ul>
    </li>
  </ul>
</div>

无论我做什么，我都无法将菜单对齐到网页的中央。

非常感谢您的帮助。

提前致谢。

Answer 1

像这样？我添加了以下 CSS:

#menu {
  position: absolute;
  left: 50%;
  transform:translate(-50%, 0);
}

body {
  padding: 3em;
}

#menu {
  position: absolute;
  left: 50%;
  transform:translate(-50%, 0);
}

#menu>li:hover ul {
  display: block;
}

#menu * {
  padding: 0;
  margin: 0;
  font: 12px georgia;
  list-style-type: none;
}

#menu a {
  display: block;
  text-decoration: none;
  color: #3B5330;
}

#menu a:hover {
  background: #B0BD97;
}

#menu ul {}

#menu ul li ul li a:hover {
  background: #ECF1E7;
  padding-left: 9px;
  border-left: solid 1px #000;
}

#menu ul li ul li {
  width: 140px;
  border: none;
  color: #B0BD97;
  padding-top: 3px;
  padding-bottom: 3px;
  padding-left: 3px;
  padding-right: 3px;
  background: #B0BD97;
  z-index: 1;
}

#menu ul li ul li a {
  font: 11px arial;
  font-weight: normal;
  font-variant: small-caps;
  padding-top: 3px;
  padding-bottom: 3px;
}

#menu ul li {
  float: left;
  width: 146px;
  font-weight: bold;
  border-top: solid 1px #283923;
  border-bottom: solid 1px #283923;
  background: #979E71;
}

#menu ul li a {
  font-weight: bold;
  padding: 15px 10px;
}

#menu li {
  position: relative;
  float: left;
}

#menu ul li ul,
#menu:hover ul li ul,
#menu:hover ul li:hover ul li ul {
  display: none;
  list-style-type: none;
  width: 140px;
  bottom: 0;
}

#menu:hover ul,
#menu:hover ul li:hover ul,
#menu:hover ul li:hover ul li:hover ul {
  display: block;
}

#menu:hover ul li:hover ul li:hover ul {
  position: absolute;
  margin-left: 145px;
  margin-top: -22px;
  font: 10px;
}

#menu:hover ul li:hover ul {
  position: absolute;
  margin-top: 1px;
  font: 10px;
}

#menu>ul>li:hover>ul {
  bottom: 100%;
  border-bottom: 1px solid transparent
}

<iframe style="width:100%">padding</iframe>
<div id="menu">
  <ul>
    <li>
      <center>item1</center>
      <ul>
        <li><a href="f1.html">A</a></li>
        <li><a href="f2.html">B</a></li>
        <li><a href="f3.htmll">C</a></li>
      </ul>
    </li>
  </ul>
</div>