我正在尝试在页面顶部创建一个导航栏,并且下拉菜单未正确位于其父母下方。我尝试将左侧边距设置为零,但是这使下拉列表与导航栏的左侧对齐,而不是与父级的左侧对齐。
Codepen:https://codepen.io/anon/pen/RedvWG
nav{
float:right;
display: inline-block;
position: fixed;
white-space: nowrap;
}
nav ul li{
display: inline;
padding-left: 5px;
float: left;
}
nav ul ul{
display: none;
position: absolute;
width: inherit;
}
nav ul{
list-style-type: none;
text-decoration: none;
position: relative;
}
nav a{
text-decoration: none;
font-size: 15px;
padding-right: 5px;
display: block;
}
nav ul li:hover > ul{
display: inline-block;
}
nav ul ul li{
float:none;
display: list-item;
z-index: 1;
position: relative;
}
nav ul ul li a{
text-align: center;
}
<nav>
<ul>
<li><a href="#">Music</a></li>
<li><a href="#">Genres</a>
<ul>
<li><a href="#">Dropdown</a></li>
<li><a href="#">Dropdown</a></li>
</ul>
</li>
</ul>
</nav>
答案 0 :(得分:1)
您必须将嵌套的'ul'列表填充设置为0,并有选择地覆盖在嵌套的'ul'元素中,将padding-left填充为0。
ul ul { padding: 0 }
ul ul li { padding-left: 0 }
答案 1 :(得分:0)
nav{
float:right;
display: inline-block;
position: fixed;
white-space: nowrap;
}
nav ul li{
display: inline;
padding-left: 5px;
float: left;
position:relative;
}
nav ul ul{
display: none;
position: absolute;
width: inherit;
padding:0;
left:-5px;
}
nav ul{
list-style-type: none;
text-decoration: none;
position: relative;
}
nav a{
text-decoration: none;
font-size: 15px;
padding-right: 5px;
display: block;
}
nav ul li:hover > ul{
display: inline-block;
}
nav ul ul li{
float:none;
display: list-item;
z-index: 1;
position: relative;
padding: 0px;
}
nav ul ul li a{
text-align: center;
}
<nav>
<ul>
<li><a href="#">Music</a></li>
<li><a href="#">Genres</a>
<ul>
<li><a href="#">Dropdown</a></li>
<li><a href="#">Dropdown</a></li>
</ul>
</li>
</nav>
答案 2 :(得分:0)
似乎ul
上的默认填充导致了不良行为。我重新排列了CSS,以便更好地级联。您应该将不太具体的选择器放在顶部附近,并在向下浏览样式表时获得更具体的选择。
https://codepen.io/tehpsalmist/pen/PyLVWK
nav {
float: right;
display: inline-block;
position: fixed;
white-space: nowrap;
}
ul {
padding-left: 0; /* This solved it */
}
nav ul {
list-style-type: none;
text-decoration: none;
position: relative;
}
nav ul li {
display: inline;
position: relative;
float: left;
}
nav ul li ul {
display: none;
position: absolute;
left: 0;
}
nav a {
text-decoration: none;
font-size: 15px;
padding-right: 5px;
display: block;
}
nav ul li:hover > ul {
display: inline-block;
}
nav ul ul li {
float: none;
display: list-item;
z-index: 1;
}