html - 导航下的图像使链接不可点击。

Question

出于某种原因，除非在 Internet Explorer 中，否则链接不可点击。我试着给它一个较小的 z-index，我什至仔细检查是否有任何冲突，但我就是无法让它工作。我确定这是因为在导航上，但老实说我不知道​​如何解决这个问题？

我的代码是这样设置的:

    /* Navbar BG Big */
.image {
    position: relative;
    margin-right: auto;
    margin-left: auto;
    height: auto;
    width: 100%; /* for IE 6 */
    background-image: url(../images/headerbg.png);
    background-repeat: repeat-x;
    text-align: center;
}

/* Navbar BG Small */
@media all and (max-width: 1200px) { 
.image {
    background-image: url(../images/spacer.gif);
} 
}

/* Logo Styles */
@media all and (max-width: 800px) { 
#big-logo {
    display: none;
    position: relative;
    z-index: -999;
}
}

@media all and (min-width: 800px) { 
#small-logo {
    display: none;
    position: relative;
    z-index: -998;
}
}

/* Small Nav */
@media all and (max-width: 900px) { 
nav ul {
    list-style-image: none;
    list-style-type: none;
    width: 100%;
    position: absolute;
    margin-bottom: 2em;
}

nav ul li {
    display: inline;
    text-align: center;
    margin-right: .5em;
    margin-left: .5em;
}
}

/* Big Nav */
@media all and (min-width: 900px) { 
nav ul {
    list-style-image: none;
    list-style-type: none;
    width: 100%;
    position: absolute;
    margin-bottom: 2em;
    margin-top: .4em;
}

nav ul li {
    display: inline;
    text-align: center;
    margin-right: 0.5em;
    margin-left: 0.5em;
}
}

.navtext:link, .navtext:visited {
    color: #FFFFFF;
    text-decoration: none;
    font-size: 1em;
    text-shadow: 1px 1px 1px #333;
    font-family: Arial, Helvetica, sans-serif;
    font-weight: bold;
    text-transform: uppercase;
    display: inline-block;
    letter-spacing: 0.2em;
    margin-top: 0.5em;
    margin-bottom: 0.5em;
    padding-right: 2em;
    font-style: normal;
}  

.navtext:hover {
    color: #FFFFFF;
    text-shadow: 1px 1px 2px #00c4ff;
    text-decoration: none;
} 

HTML

    <!-- logo & nav !-->
<div class="image">

    <nav>
<ul>
    <li><a href="#" class="navtext">Home</a></li>
    <li><a href="#" class="navtext">About</a></li>
    <li><a href="#" class="navtext">Services</a></li>
    <li><a href="#" class="navtext">Portfolio</a></li>
    <li><a href="#" class="navtext">Product</a></li>
    <li><a href="#" class="navtext">Store</a></li>
    <li><a href="#" class="navtext">Support</a></li>
    <li><a href="#" class="navtext">Contact</a></li>        
</ul>
    <ul>
    <li>
<div id="spacer"></div>    
    <!-- big logo !-->
<img src="images/headerlogo.png" alt="ETV Software" id="big-logo" border="0"/>
    </li>
    </ul>
    </nav>

    <!-- navdrop image here !-->
<img src="images/navdrop.png"/>   

    <!-- small logo !--> 
<img src="images/headerlogo.png" alt="Etv Software" id="small-logo" border="0"/> 

</div>

JSFiddle of the code above

Answer 1

与其为元素提供负的 z-index，不如尝试为您想要的 ul 设置 z-index: 1。

http://jsfiddle.net/M38ka/1/