子元素悬停/链接在CSS

我试图让当过他们的用户鼠标（它们形成一个导航栏按钮）一些元素略微移动。然而，我的代码似乎并没有工作。在框中的文本也应该可以点击，但似乎并没有任何工作。下面的代码：子元素悬停/链接在CSS

#navbar { 
position: relative; 
width: max-width; 
height: auto; 
margin-left: 2%; 
} 

.nav_tab{ 
background-image: url('dark_exa.png'); 
border: 2px dashed grey; 

/* rounded borders of 5px in firefox */ 
-moz-border-radius:10px; 

/* rounded borders of 5px in chrome and other browsers */ 
-webkit-border-radius:10px; 

/* rounded borders of 5px in browsers that support css3 */ 
border-radius:10px; 

/* shadows for different browsers */ 
-moz-box-shadow: 0 0 0 3px black, 2px 1px 4px 4px rgba(10,10,0,.5); 
-webkit-box-shadow: 0 0 0 3px black 2px 1px 4px 4px rgba(10,10,0,.5); 
box-shadow: 0 0 0 3px black, 2px 1px 6px 4px rgba(10,10,0,.5); 
position: relative; 
height: auto; 
width:20%; 
z-index: -1; 
margin-left: 2%; 
margin-right: 2%; 
top: -30px; 
display: inline-block; 
} 

.nav_tab:hover{ 
position: relative; 
top: +5px; 
} 

h1 { 
font-size:40px; 
text-align: center; 
color: white; 
font-family: "Gabriela"; 
margin: 20px; 
margin-top: 130px; 
} 
h2 { 
font-size:30px; 
text-align: center; 
color: white; 
font-family: "Gabriela"; 
margin: 10px; 
margin-top: 40px; 
}

和HTML：

<div id="navbar"> 
<div class="nav_tab"><h2><a href="http://www.stackoverflow.com">Zues</a></h2></div> 
<div class="nav_tab"><h2>Jack</h2></div> 
<div class="nav_tab"><h2>Denise</h2></div> 
<div class="nav_tab"><h2>Joel</h2></div></div>

我不完全知道什么是怎么回事，但我相信这是某种形式的亲子问题。

谢谢。

来源

2013-03-09 Joel Auterson

使用[小提琴]（http://jsfiddle.net）做一个演示，使其便于所有回答。谢谢。 – 2013-03-09 14:30:36