CSS导航悬停效果答案

【问题标题】：CSS navigation hover effectCSS导航悬停效果
【发布时间】：2015-06-28 23:09:46
【问题描述】：

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

我正在制作一个看起来像标签的导航菜单，我希望标签在悬停时从顶部展开。但是我的 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;
}

【问题讨论】：

你能把html和相关的js也贴出来吗？一个小提琴世界真的很有帮助。
这里是小提琴 :) jsfiddle.net/jw71ga6h
jsfiddle.net/jw71ga6h/2 这将解决对齐问题（大部分），但您正在更改列表项的大小，因此父项将相应扩展。您可能需要重新考虑处理此问题的方式。
有更聪明的方法来做这个 Paulie_D 吗？如果是这样，我愿意接受建议！
我不得不考虑......也许是一些带有盒子阴影的东西，但它会让 CSS 变得相当复杂。

标签： jquery html css

【解决方案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>

【讨论】：

有什么办法可以进一步调整它，使文本随着标签向上移动 10 像素？

【解决方案2】：

如果您只需要“向下”移动，则更改 padding-bottom 而不是 padding-top。

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

如果您将第一个值从 16px 更改为 22px，您会得到移动。

【讨论】：

我需要向上移动标签，我刚刚再次更新了小提琴，标签仍然向下而不是向上打开..jsfiddle.net/jw71ga6h/3
哦，对不起 - 翻译丢失了。你是什么意思“所以它不移动父级，只在菜单项的顶部展开”？