0

我有一个与上周问过的问题非常相似的问题，但我遇到了另一个问题。我为你们做了一个小提琴！手指交叉这是一个简单的修复！

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

除非我将鼠标快速悬停并悬停在 ul open 子菜单的最左侧/右侧，否则页脚的导航子菜单在鼠标移出后不会保持打开状态

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

我的下拉菜单 (#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);
}
4

2 回答 2

1

您的问题是特异性之一。

我的旧规则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>

于 2018-08-13T20:42:57.197 回答
0

我可以通过调整您的边距和定位来使其居中#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/

于 2018-08-13T20:39:42.000 回答