CSS Flex导航下拉菜单的位置有点糟糕

Question

我正在尝试使用下拉菜单创建导航栏。 但是“产品”中的下拉菜单在右边。 我希望他们开始与他们的父公司“产品”保持一致。 有人可以帮我吗？ 另外，我想使用flex。 不使用flex，我就能避免这个问题。 这些是代码，您可以将结果悬停在“产品”上，以查看结果。

 *{ list-style: none; text-decoration: none; } .nav { width: 100%; height: 40px; background-color: #ff6a00; } .nav ul{ margin:0px; display: -webkit-box;/* Chrome */ display: -moz-box;/* Firefox*/ display: -ms-flexbox;/* IE 10 */ display: -webkit-flex; /* Safari 6.1+ */ display: flex; -webkit-flex-flow: row wrap; justify-content: flex-end; } .nav ul li{ padding: 0em 1em 0em 1em ; line-height: 40px; height:40px; width:60px; cursor: pointer; transition: all 0.5s; } .nav ul a{ text-decoration: none; color:white; } .nav ul li:hover{ background: #313131; } .nav ul li ul{ padding:0; position:absolute; width:100px; visibility:hidden; display:block; background: #ff6a00; } .nav ul li ul li{ display:block; cursor: pointer; transition: all 0.5s; } .nav ul li:hover ul{ display:block; visibility:visible; background: #ff6a00; } .nav ul li ul li:hover{ background: #313131; } 

  <nav class="nav"> <ul> <li><a href="#">Home</a></li> <li><a href="#">About</a></li> <li><a href="#">Product</a> <ul> <li><a href="#">1</a></li> <li><a href="#">2</a></li> <li><a href="#">3</a></li> <li><a href="#">4</a></li> </ul> </li> <li><a href="#">Contact</a></li> </ul> </nav> 

Answer 1

嗯，我不确定这是否是最好的方法，但是仍然可以解决。

不要在.nav ul li ul中使用绝对位置，而要使用相对位置，然后将right属性设置为1em。 为您提供以下代码：

.nav ul li ul {
  padding: 0;
  position: relative;
  right: 1em;
  width: 100px;
  visibility: hidden;
  display: block;
  background: #ff6a00;
}

这是为了抵消父li标签中的填充： .nav ul li { padding: 0em 1em 0em 1em; .... } .nav ul li { padding: 0em 1em 0em 1em; .... }