Question

我正在尝试在页面顶部创建一个导航栏，并且下拉菜单未正确位于其父母下方。我尝试将左侧边距设置为零，但是这使下拉列表与导航栏的左侧对齐，而不是与父级的左侧对齐。

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>

Answer 1

您必须将嵌套的'ul'列表填充设置为0，并有选择地覆盖在嵌套的'ul'元素中，将padding-left填充为0。

ul ul { padding: 0 }
ul ul li { padding-left: 0 }

Answer 2

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>

Answer 3

似乎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;
}

子下拉菜单不在父项下居中

3 个答案: