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

时间:2018-10-28 18:44:20

标签: html css

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

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>

3 个答案:

答案 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;
}