我目前正在为一家直升机滑雪公司制作网站,但我在使用下拉菜单时遇到了问题。由于某种原因,它没有正确对齐。我在这个网站上看过类似的帖子来寻找答案,似乎将父元素的位置设置为 relative 并将子元素的位置设置为 absolute 是最常见的答案;但是,这对我不起作用。可能是因为我将它应用于错误的父/子元素;但我尝试了很多不同的选择,但似乎没有任何效果。下面是我的代码(我遇到了 jsfiddle 的问题,我对其他元素感到非常沮丧,无法解决另一个问题)。我也知道我的 css 代码很乱,需要稍微清理一下。感谢您的帮助
HTML:
<header>
<a name="top"></a>
<div class="header">
<div class="nav-a">
<ul class="menu">
<li class="menu-item-2667"><a href="index.html">Trips</a>
<ul class="drop-down">
<li class="drop-down-items"><a href="#">Alaska Trip</a></li>
<li class="drop-down-items"><a href="#">Chile Trip</a></li>
<li class="drop-down-items"><a href="#">Argentina Trip</a></li>
</ul>
</li>
<li class="menu-item-20"><a href="gallery.html">Gallery</a></li>
</ul>
</div>
<div class="nav-b">
<ul class="menu">
<li class="menu-item-126"><a href="about.html">About</a></li>
<li class="menu-item-127"><a href="contact.html">Contact</a></li>
</ul>
</div>
</div>
</header>
CSS:
ul, menu, dir{
display: block;
list-style-type: disc;
margin-block-start: 1em;
margin-block-end: 1em;
margin-inline-start: 0px;
margin-inline-end: 0px;
padding-inline-start: 40px;
}
ul, ol {
margin-left: 0;
}
ul, ol, dl {
font-size: 1em;
line-height: 1.6;
margin-bottom: 1.25em;
list-style-position: outside;
font-family: inherit;
}
li {
display: list-item;
text-align: -webkit-match-parent;
}
a {
color: red;
text-decoration: none;
line-height: inherit;
}
a:hover,
a:focus {
color: #e60000;
}
@media only screen and (min-width: 768px) {
header {
padding: 0 15px;
}
}
.header {
padding: 0px 0px 15px;
width: 100%;
margin-left: auto;
margin-right: auto;
margin-top: 0;
margin-bottom: 0;
max-width: 60.875em;
}
.header:before,
.header:after {
content: " ";
display: table;
}
.header:after {
clear: both;
}
.header>.nav-a {
display: none;
position: relative;
padding-left: 0.9375em;
padding-right: 0.9375em;
margin: auto;
width: 100%;
float: left;
}
.header>.nav-b {
display: none;
position: relative;
padding-left: 0.9375em;
padding-right: 0.9375em;
margin: auto;
width: 100%;
float: right;
}
@media (min-width: 768px){
.header>.nav-a {
display: block;
position: relative;
padding-left: 0;
padding-right: 0;
margin: auto;
width: 50%;
right: auto;
left: auto;
float: left;
}
.header>.nav-b{
display: block;
position: relative;
padding-left: 0;
padding-right: 0;
margin: auto;
width: 50%;
right: auto;
left: auto;
float: right;
}
}
.menu {
display: block;
padding: 0;
*zoom: 1;
margin-top: 15px;
margin-bottom: 0;
margin-right: 0;
margin-left: 0;
}
.menu:before,
.menu:after {
content: " ";
display: table;
}
.menu:after {
clear: both;
}
.menu>li {
display: inline;
height: auto;
float: left;
padding: 0 0.625em 1.25em;
}
.menu>li {
width: 33.33333%;
padding: 0 0.625em 1.25em;
}
.menu>li:nth-of-type(n) {
clear: none;
}
.menu>li:nth-of-type(3n+1) {
clear: both;
}
@media only screen and (min-width: 768px) {
.menu {
margin-top: 30px;
}
}
@media only screen and (min-width: 1024px) {
.menu {
margin-top: 30px;
}
}
@media only screen and (min-width: 1230px) {
.menu {
margin-top: 30px;
}
}
.menu>li {
padding-bottom: 0;
}
.menu>li>a {
font-family: "Tungsten A", "Tungsten B";
font-weight: 400;
font-style: normal;
font-size: 24px;
text-align: center;
padding: 0 15px;
display: inline-block;
color: #525252;
border: 3px solid #f3f3f3;
text-transform: uppercase;
-webkit-transition: all 300ms ease-out;
-moz-transition: all 300ms ease-out;
transition: all 300ms ease-out;
}
@media only screen and (min-width: 768px) {
.menu>li>a {
font-size: 20px;
}
}
@media only screen and (min-width: 1024px) {
.menu>li>a {
font-size: 28px;
}
}
@media only screen and (min-width: 1230px) {
.menu>li>a {
font-size: 30px;
}
}
.menu>li>a.active {
color: #111;
}
.menu>li>a:hover {
border: 3px solid rgb(0, 0, 0);
color: #181818;
}
.drop-down-items {
display: none;
}
.menu .menu-item-2667:hover .drop-down .drop-down-items{
display: inline-block;
padding: 0;
width: auto;
left: 0;
}
.drop-down-items a {
font-family: "Tungsten A", "Tungsten B";
font-weight: 400;
font-style: normal;
font-size: 14px;
text-align: center;
display: inline-block;
color: #525252;
border: 3px solid #f3f3f3;
text-transform: uppercase;
margin-left: auto;
margin-right: auto;
width: auto;
margin: 0px;
-webkit-transition: all 300ms ease-out;
-moz-transition: all 300ms ease-out;
transition: all 300ms ease-out;
}
.menu>li>ul>li>a:hover {
color: #181818;
}
最佳答案
这是因为你的css样式中的padding-inline-start,你可以删除样式或向下拉菜单添加内联样式,如下所示
<ul class="drop-down" style="padding-inline-start: 0;">
<li class="drop-down-items"><a href="#">Alaska Trip</a></li>
<li class="drop-down-items"><a href="#">Chile Trip</a></li>
<li class="drop-down-items"><a href="#">Argentina Trip</a></li>
</ul>
关于html - 下拉菜单未对齐,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/53531286/