子元素懸停/鏈接在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