html - 将我的下拉菜单居中

标签 html css centering

我有一个与上周问过的问题非常相似的问题,但我遇到了另一个问题。我为你们做了一个 fiddle !祈祷这很容易解决!

这是上周相关问题的链接:

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 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);
}

最佳答案

您的问题是 specificity 之一.

My old rule 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>

关于html - 将我的下拉菜单居中,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/51830083/

相关文章:

html - 如何覆盖子元素的样式设置?

java - 在 relativeLayout 中将 View 设置在中心下方几处

javascript - 如何使用 thymeleaf 获取文本区域数据

css - 如何强制 div 位于不在其间的其他两个 div 的下方?

html - select、input 和 label 元素有 height 属性吗?

html - 为我的 wrapper 添加阴影边框

html - 使用固定宽度的列在 CSS 网格中居中

html - 将包含大小相对于页面宽度的图像的 div 居中

html - Angular-如何为一个 child 更改父 div 容器的 css 属性

jquery - 切换(显示/隐藏)两个背景 div 中的一个背景,css jquery