html - 子下拉列表不在父级下方居中

Question

我试图在我的页面顶部制作一个导航栏，并且下拉菜单没有正确地居中在他们的父母之下。我尝试将左边距设置为零，但这会使下拉菜单与导航的左侧而不是父级的左侧对齐。

代码笔： 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>

标签： htmlcss

Answer 1

您必须将嵌套的“ul”列表填充设置为 0，并可选择将嵌套的“ul”元素中的“li”覆盖为 0。

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