我有一个与上周问过的问题非常相似的问题,但我遇到了另一个问题。我为你们做了一个 fiddle !祈祷这很容易解决!
这是上周相关问题的链接:
我现在已经摆脱了我代码中的大部分百分比,并且它产生了一些居中问题。
我的下拉菜单 (#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/