无法在浮动Div中选择（单击）锚点链接

Question

我从来没有见过这样的傻事，或者可能是凌晨2点30分，我是幻觉。我在标题中做了简单的锚链接，我完全无法点击它们。它们只是纯文本，完全不可点击。

如果你能给我一个暗示我不遵守HTML / CSS守护进程的内容，我将感激不尽。

HTML

<header>
    <div class="confine">

        <div class="complete-head-content">

              <div class="left-width-less logo-width">
                  <img src="./imgs/twit-logo.png" />
              </div>

              <div class="right-width-less">
                  <div class="top-header-content">

                         <h1 class="pres-title">Defining Twisted Strategy</h1>
                  </div>

                  <div class="lower-header-content">

                        <div id="navcontainer">
                          <ul>
                            <li><a href="http://www.google.com">Meet the Hobos</a></li>
                            <li><a href="#">Why me?</a></li>
                            <li><a href="#">Our Work in Oblivion</a></li>
                            <li><a href="#">Our Perspective</a></li>
                            <li><a href="#">Our Approach</a></li>
                          </ul>
                        </div>

                  </div>
              </div>

              <div class="c"> </div>
        </div>

    </div>

  </header>

  <div id="contend"> 
  ... ... ... 

CSS

a {
  color: #EA2E49;
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
  color: #EA2E49;
  cursor: pointer;
}

header {
  height: 50px;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  display: block;
  z-index: 1;
}

.complete-head-content {
  width: 100%;
  background-color: #a0c654;
  height: 130px;
}

.left-width-less {
  float: left;
  background-color: #fff;
  width: 15%;
  text-align: center;
  height: 130px;
    vertical-align: middle;
}

.left-width-less img {

  width : 76px; 
  height: 100px;
  margin-top: 10px;
}

.right-width-less {
    float: right;
    width: 85%;
}

.top-header-content {
  width: 100%;
  height: 70px;
  background: #437b3c url("../imgs/presentation-title-bg.jpg") no-repeat right;
}

.lower-header-content {
  width: 100%;
  height: 70px;
}

.logo {
  cursor: pointer;
}

/* Navigation */

#navcontainer {
  font-family: "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 16px;
  text-transform: uppercase;
  margin-top: 19px;
}
#navcontainer ul
{
  margin: 0;
  padding: 0;
  list-style-type: none;
  text-align: left;
}

#navcontainer ul li { display: inline; }

#navcontainer ul li a
{
  text-decoration: none;
  padding: .2em 1.7em;
  color: #fff;
}

#navcontainer ul li a:hover
{
color: #fff;
background-color: #369;
}

修改

感谢Nikhil，它有一个Z-index：1，当被删除时修复了这个bug。

感谢。

Answer 1

除非你遗漏了什么。无论有没有css，它都适合我。 在IE 8中测试

你是如何包括CSS顺便说一句的？

Answer 2

标记旁边的<div id="contend">有一个z-index:1。这使得<header>标记中的每个链接都不可点击。

解决方案是删除z-index属性。

希望它有所帮助。