将我的下拉菜单居中

Question

我有一个与我上周提出的问题非常相似的问题，但我运行遇到了另一个问题。我为你们做了一个fiddle！祈祷这很容易解决！

这是上周相关问题的link：

我现在已经摆脱了我代码中的大部分百分比，并且它产生了一些居中问题。

我的下拉菜单 (#footer-nav ul ul) 不再在页面居中，而且我似乎无法将其居中！在我删除代码中的大部分百分比之前，将 #info > ul 的 margin-left 设置为 calc(-50% + 18.67px) 有效，但这不再有效！

非常感谢任何帮助！你们是救星！！！

JS Fiddle: http://jsfiddle.net/c74jsgub/14/

编辑：我是编码新手，所以如果你们发现代码中有任何可以改进的地方等等，请告诉我！ :)

HTML:

<!DOCTYPE html>
<html>
   <head>
      <title></title>
   </head>
   <body>
      <footer id="footer">
         <div id="footer-nav">
            <ul>
               <li id="info">
                  INFO
                  <ul>
                     <li id="twitter">
                        <a href="https://twitter.com" target="_blank">TWITTER</a>
                     </li>
                     <li id="instagram">
                        <a href="https://www.instagram.com" target="_blank">INSTAGRAM</a>
                     </li>
                     <li id="email">
                        <a href="mailto:mail@mail.com">EMAIL</a>
                     </li>
                  </ul>
               </li>
            </ul>
         </div>
      </footer>
   </body>
</html>

CSS:

a {
  text-decoration: none;
  color: inherit;
  display: block;
}

#footer {
  width: 100%;
  background-color: white;
  position: fixed;
  margin: 0px;
  padding: 0px;
  bottom: 0;
  left: 0;
  text-align: center;
  z-index: 11;
}

#footer-nav {
  width: 100%;
}

#info {
  display: inline-block;
}

#footer-nav ul {
  font-family: Arial;
  font-size: 15px;
  font-weight: bold;
  color: #000000;
  list-style-type: none;
  text-align: center;
  margin: auto;
  padding-top: 0px;
  padding-right: 0px;
  padding-bottom: 10px;
  padding-left: 0px;
}

#footer-nav ul ul {
  width: 300px;
  list-style-type: none;
  font-weight: normal;
  padding-top: 10px;
  display: none;
}

#footer-nav ul li:hover>ul {
  display: block;
  position: absolute;
  bottom: 100%;
  text-align: center;
  margin: auto 0;
}

#twitter {
  padding-top: 10px;
  padding-bottom: 10px;
  border: 1px solid black;
  color: #000000;
  background-color: white;
}

#twitter:hover {
  background-color: black;
  color: white;
}

#email {
  padding-top: 10px;
  padding-bottom: 10px;
  border: 1px solid black;
  color: #000000;
  background-color: white;
}

#email:hover {
  background-color: black;
  color: white;
}

#instagram {
  padding-top: 10px;
  padding-bottom: 10px;
  border: 1px solid black;
  color: #000000;
  background-color: white;
}

#instagram:hover {
  background-color: black;
  color: white;
}

#info>ul {
  margin-left: calc(-50% + 15px);
}

Answer 1

我可以通过调整 #footer-nav ul ul 的边距和定位来使其居中。请记住，为了居中，您需要水平边距为 auto 而不是 0。

#footer-nav ul li:hover>ul {
  display: block;
  position: absolute;
  bottom: 100%;
  text-align: center;
  margin: 0 auto; /* not auto 0 */
  left: 0;
  right: 0;
}

Fiddle: http://jsfiddle.net/c74jsgub/41/

Answer 2

您的问题是 specificity 之一。

of margin-left: calc(-50% + 15px) 仍然被应用到 #info > ul，但不幸的是选择器 #footer-nav ul li:hover>ul 具有更多的特异性。此选择器具有规则 margin: 0 auto，它会覆盖 calc() 规则。

首先，您需要使用更具体的选择器，例如 #footer-nav ul #info:hover>ul。

除此之外，您还需要稍微调整 margin-left。这一次，您需要 calc()，而只需 margin-left: -132px.

这可以在下面看到：

a {
  text-decoration: none;
  color: inherit;
  display: block;
}

#footer {
  width: 100%;
  background-color: white;
  position: fixed;
  margin: 0px;
  padding: 0px;
  bottom: 0;
  left: 0;
  text-align: center;
  z-index: 11;
}

#footer-nav {
  width: 100%;
}

#info {
  display: inline-block;
}

#footer-nav ul {
  font-family: Arial;
  font-size: 15px;
  font-weight: bold;
  color: #000000;
  list-style-type: none;
  text-align: center;
  margin: auto;
  padding-top: 0px;
  padding-right: 0px;
  padding-bottom: 10px;
  padding-left: 0px;
}

#footer-nav ul ul {
  width: 300px;
  list-style-type: none;
  font-weight: normal;
  padding-top: 10px;
  display: none;
}

#footer-nav ul li:hover>ul {
  display: block;
  position: absolute;
  bottom: 100%;
  text-align: center;
  margin: auto 0;
}

#twitter {
  padding-top: 10px;
  padding-bottom: 10px;
  border: 1px solid black;
  color: #000000;
  background-color: white;
}

#twitter:hover {
  background-color: black;
  color: white;
}

#email {
  padding-top: 10px;
  padding-bottom: 10px;
  border: 1px solid black;
  color: #000000;
  background-color: white;
}

#email:hover {
  background-color: black;
  color: white;
}

#instagram {
  padding-top: 10px;
  padding-bottom: 10px;
  border: 1px solid black;
  color: #000000;
  background-color: white;
}

#instagram:hover {
  background-color: black;
  color: white;
}

#footer-nav ul #info:hover>ul {
  margin-left: -132px;
}

<!DOCTYPE html>
<html>

<head>
  <title></title>
</head>

<body>
  <footer id="footer">
    <div id="footer-nav">
      <ul>
        <li id="info">INFO
          <ul>
            <li id="twitter">
              <a href="https://twitter.com" target="_blank">TWITTER</a>
            </li>
            <li id="instagram">
              <a href="https://www.instagram.com" target="_blank">INSTAGRAM</a>
            </li>
            <li id="email">
              <a href="mailto:mail@mail.com">EMAIL</a>
            </li>
          </ul>
        </li>
      </ul>
    </div>
  </footer>
</body>

</html>

将我的下拉菜单居中

Centering my drop-up menu

html

css

centering