HTML导航选项卡可见但不可点击

Question

我的网站上的导航标签出现问题。我可以通过单击每个选项卡上相应的链接图像来选择选项卡，但最后一个选项卡除外（tab6）。它上面没有隐藏的对象，tab6是唯一有问题的对象。下面是适当的代码剪辑，谢谢！

HTML片段：

<ul id="tabs">
        <li id="tab1"><a href="http://weather.uncc.edu/"> <img src="../src/button_home.png" onmouseover="this.src='../src/button_home_hover.png'" onmouseout="this.src='../src/button_home.png'" height="10%" width="10%"> </a></li>
        <li id="tab2"><a href="http://brianmagiweatheruncc.dreamhosters.com/obs/"><img src="../src/button_obs.png" onmouseover="this.src='../src/button_obs_hover.png'" onmouseout="this.src='../src/button_obs.png'" height="10%" width="10%"></a></li>
        <li id="tab3"><a href="http://brianmagiweatheruncc.dreamhosters.com/models"><img src="../src/button_models.png" onmouseover="this.src='../src/button_models_hover.png'" onmouseout="this.src='../src/button_models.png'" height="10%" width="10%"></a></li>
        <li id="tab4"><a href="http://brianmagiweatheruncc.dreamhosters.com/radar/"><img src="../src/button_radar_push.png" onmouseover="this.src='../src/button_radar_hover.png'" onmouseout="this.src='../src/button_radar_push.png'" height="10%" width="10%"></a></li>
        <li id="tab5"><a href="https://brianmagiweatheruncc.dreamhosters.com/"><img src="../src/button_station.png" onmouseover="this.src='../src/button_station_hover.png'" onmouseout="this.src='../src/button_station.png'" height="10%" width="10%"></a></li>
        <li id="tab6"><a href="https://weather.uncc.edu/faq/"><img src="../src/button_contact.png" onmouseover="this.src='../src/button_contact_hover.png'" onmouseout="this.src='../src/button_contact.png'" height="10%" width="10%"></a></li>
        </ul> 

CSS片段：

#tabs {
 margin: 0;
 padding: 0;
 }  
#tabs li {
 display:inline; width:192px; height:50px;
 }
 #tabs li a {
 text-decoration: none;
 padding: 0.05em 0.05em;
 }