Question

我遇到了一个问题，试图在导航标签中将悬停高于标准深色背景。

这适用于“推拉门”技术+精灵。但是使用HTML 5和CSS 3重建代码是必要的。

HTML：

<nav>
    <ul class="reset">
      <li class="current"><a href="index.html">home page</a></li>
      <li><a href="#">about us</a></li>
      <li><a href="#">technology</a></li>
      <li><a href="services.html">services</a></li>
      <li><a href="#">network</a></li>
      <li><a href="contacts.html">contacts</a></li>
    </ul>
  </nav>

CSS：

 nav {
  position: relative;
  top: 38px;
  right: 0px;
  height: 38px;
  padding-top: 10px;
  float: right;
}

nav li {
  height: 38px;
  float: left;
  list-style-type: none;
  margin-left: 1px;
  text-transform: uppercase;
  text-align: center;
  vertical-align: bottom;
}

nav a {
  height: 22px;
  padding: 16px 16px 0px 16px;
  display: block;
  text-decoration: none;
  color: white;
  background: #16222f;
  border-radius: 4px 4px 0px 0px;
}

nav a:hover {
  background: #ff4e00;
  border-radius: 4px 4px 0px 0px;
}

当前结果：http://jsfiddle.net/acy5p/

我很乐意接受任何建议。

Answer 1

您好我已经改变了您的CSS希望它正是您要找的......

  /*Menu*/
    nav {
      position: relative;
      top: 38px;
      right: 0px;
      height: 58px;
      padding-top: 10px;
      float: right;
        vertical-align:bottom;
    }
    nav li {
      height: 38px;
      float: left;
      list-style-type: none;
      margin-left: 1px;
      text-transform: uppercase;
      text-align: center;
      vertical-align: bottom;
    }
    nav a {
      height: 22px;
      padding: 16px 16px 0px 16px;
      display: block;
      text-decoration: none;
      color: white;
      background: #16222f;
      border-radius: 4px 4px 0px 0px;
    }
    li a:hover {
      background: #ff4e00;
      border-radius: 4px 4px 0px 0px;
        margin-top: -10px;
        padding-bottom:10px;
        top:-10px;
    }

jsfiddle.net/acy5p/1看看这个小提琴......

不断增长的标签和悬停在更高的高度

1 个答案: