Question

我有一个非常类似于上周提出的问题，但是我遇到了另一个问题。我为你们弄了个小提琴！手指交叉这很容易解决！

以下是上周相关问题的链接：

Footer's nav submenu won't stay open after I mouse out unless I mouse over quickly and hover far left/right of my ul open submenu

我现在已经摆脱了代码中的大多数百分比，这带来了一些居中问题。

我的下拉菜单（＃footer-nav ul ul）不再位于页面的中心，而且我似乎无法使其居中！在删除代码中的大多数百分比之前，将#info> ul的margin-left设置为calc（-50％+ 18.67px）可以，但是不再起作用！

任何人和所有帮助将不胜感激！你们是救命的人！！！

JS小提琴：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

您的问题是specificity之一。

margin-left: calc(-50% + 15px)中的

My old rule 仍适用于#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>

Answer 2

我可以通过调整边距和定位#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;
}

提琴：http://jsfiddle.net/c74jsgub/41/

使我的下拉菜单居中

2 个答案: