Question

我尝试使用下拉菜单制作导航栏。但是来自＆＃34; Product＆＃34;的下拉菜单有点偏右。我希望他们开始与他们的父母＆＃34;产品＆＃34;对齐。有人可以帮我吗？另外，我想使用flex。不使用flex，我能够避免这个问题。这些是代码，您可以运行以查看结果，将鼠标悬停在＆＃34;产品＆＃34;。

＆＃13;

*{
	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;
}

＆＃13;

            <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>

＆＃13;

Answer 1

嗯，我不确定这是做这件事的最佳方法，但它仍然是一个修复。

不使用.nav ul li ul中的绝对位置，而是使用相对位置，然后将右属性设置为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; .... }

CSS Flex导航下拉菜单的位置有点不好

1 个答案: