jquery - CSS导航悬停效果

Question

我正在尝试实现悬停效果，需要一些帮助。

我正在制作一个看起来像导航菜单的选项卡，我希望该选项卡在悬停时从顶部展开。但是我的 CSS 使选项卡在顶部和底部展开，并且也在移动父项。 任何人都可以帮助我调整代码，使其不会移动父级并且只在菜单项的顶部展开提前致谢!

.nav-1 ul li {
    display: inline-block;
    margin: 0px;
    padding: 0px;
}

.nav-1 ul li a {
    transition: 0.5s;
    padding:16px 22px;
    font-size: 18px;
    color: #fff;
    display: block;
    font-weight: 400;
}

.nav-1 ul li a:hover {
    transition: 0.5s;
    padding:22px 22px 26px 22px;
}

Answer 1

这里有一些使用伪元素的东西似乎符合要求。

简化演示

JSfiddle Demo

* {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

.nav-1 ul li {
	display: inline-block;
	margin: 0px;
	padding: 0px;
    vertical-align: top;
}

.nav-1 ul li a {
	transition: 0.5s;
	height: 53px;
    padding: 16px 22px;
	font-size: 18px;
	color: #fff;
	display: block;
	font-weight: 400;
    position: relative;
    background-color: inherit; /*  copies bg color for later */
}

.nav-1 ul li a:after {
    content: '';
    position: absolute; /* doesnt affect parent size */
    top:0%; /* position at top */
    left: 0;
    width: 100%;
    background-color: inherit; /* uses copied bg color */
	transition: 0.5s;
	height: 0px;
    z-index:3;
}

.nav-1 ul li a:hover:after {
	height: 12px; /* add height */
    transform:translateY(-100%); /* adjust location automatically */
}

main {
    height: 250px;
    background: rebeccapurple;
}
.nav-1 li:first-child {background-color: #a0c80a;}
.nav-1 li:nth-child(2) {background-color: #feaf00;}
.nav-1 li:nth-child(3) {background-color: #f13835;}
.nav-1 li:nth-child(4) {background-color: #1ebad8;}

	<div class="grid-container">
		<div class="grid-12 nav-1">
			<ul>
			  <li><a href="#">Home</a></li>
			  <li><a href="#">about us</a></li>
			  <li><a href="#">our team</a></li>
			  <li><a href="#">facilities</a></li>
			</ul>
		</div>
<main></main>
</div>