在弹出导航栏下方添加图像（选项卡）

Question

您可以在红色边框外面添加（图像）标签，当光标位于标签上时仍然可以响应。

我想要实现的是标签突出，当鼠标悬停在标签上时，菜单弹出。

这是一个示例，但在红色边框上方或内部移动鼠标光标时，导航栏下方的选项卡。问题是标签也是隐藏的。

＆＃13;

＆＃13;

* { box-sizing: border-box; margin: 0; padding: 0; }
nav {
  position: absolute;
  top: -100px;
  left: 0;
  right: 0;  
  height: 110px; 
  border: 1px solid red;    
  background-image: url("http://static.tumblr.com/e2rgcy1/mWPod8ter/tab.png");
  background-repeat: no-repeat;
  background-position: center; 
  -webkit-transition: all 500ms ease-out;
  -moz-transition: all 500ms ease-out;
  -o-transition: all 500ms ease-out;
  transition: all 500ms ease-out;
  z-index: 5;
}
nav:hover, nav.toggleNav {
  top: 0px;
}
ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: #a137a7;
  font-family: 'Source Sans Pro', sans-serif;
 
}
li {
  float: left;
}
li a {
  display: block;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-family: 'Source Sans Pro', sans-serif;
}
/* Hover color */

li a:hover {
  background-color: #732878;
}
.footer {
  color: #fff;
  clear: both;
  margin: 0em 0em 0em 0em;
  padding: 0.70em 0.75em;
  background: #000;
  font-family: 'Source Sans Pro', sans-serif;
  top: 490px;
  border-top: 1px solid #000;
  opacity: .7;
}

＆＃13;

<nav>

  <ul>
    <li>
     <a href="/"a target="_blank">
        <img class="img-responsive2" src="http://static.tumblr.com/e2rgcy1/Ywiod4uar/fb-icon.png" />
      </a>
    </li>

    <li>
      <a href="/" onclick="window.open(this.href, 'mywin', 
'toolbar=0,menubar=0,scrollbars=1,height=620,width=700'); return false;">
        <img class="img-responsive2" src="http://static.tumblr.com/e2rgcy1/UrWocm53a/games-icon.png" />
      </a>
    </li>


 

  </ul>
</nav>

＆＃13;

＆＃13;

＆＃13;

Answer 1

这应该让你朝着正确的方向前进。如果你想用CSS处理这个（没有javascript）并且让它响应特别是如果导航栏的高度发生变化，我会设置媒体查询，为你确定的每个断点指定一个固定的导航高度。使用固定高度的原因是每次都可以将菜单偏移到该精确尺寸。

我将标签图片移动到HTML中，而不是将其用作背景图片。我注意到图像周围有很多空白。我会修剪图像并删除它以使css中的定位更容易。我没有改变它，但如果你这样做，你需要稍微改变一下css以适应新的图像尺寸。我有点捏了一下它的中心，但是额外的白色空间有点破坏了居中。你真的想要左：50％，然后是图像宽度的一半的负边距，以使其居中。

＆＃13;

＆＃13;

* { box-sizing: border-box; margin: 0; padding: 0; }
nav {
  position: relative;
  top: -70px;
  left: 0;
  right: 0;  
  height: 70px; 
  border: none;    
  background-repeat: no-repeat;
  background-position: center; 
  -webkit-transition: all 500ms ease-out;
  -moz-transition: all 500ms ease-out;
  -o-transition: all 500ms ease-out;
  transition: all 500ms ease-out;
  z-index: 5;
  padding: 0;
  text-align:center;
}
#img-toggle {
  margin: 0 auto;
  padding: 0;
  position:absolute;
  top: -3px; /* fix this when you've trimmed your image */
  left: 32%; /* fix this when you've trimmed your image */
  }
nav:hover, nav.toggleNav {
  top: 0px;
}
ul {
  height: 70px;
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: #a137a7;
  font-family: 'Source Sans Pro', sans-serif;
 
}
li {
  float: left;
}
li a {
  display: block;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-family: 'Source Sans Pro', sans-serif;
}
/* Hover color */

li a:hover {
  background-color: #732878;
}
.footer {
  color: #fff;
  clear: both;
  margin: 0em 0em 0em 0em;
  padding: 0.70em 0.75em;
  background: #000;
  font-family: 'Source Sans Pro', sans-serif;
  top: 490px;
  border-top: 1px solid #000;
  opacity: .7;
}

＆＃13;

<nav>

  <ul>
    <li>
     <a href="/"a target="_blank">
        <img class="img-responsive2" src="http://static.tumblr.com/e2rgcy1/Ywiod4uar/fb-icon.png" />
      </a>
    </li>

    <li>
      <a href="/" onclick="window.open(this.href, 'mywin', 
'toolbar=0,menubar=0,scrollbars=1,height=620,width=700'); return false;">
        <img class="img-responsive2" src="http://static.tumblr.com/e2rgcy1/UrWocm53a/games-icon.png" />
      </a>
    </li>
  </ul>
  <img id='img-toggle' src="http://static.tumblr.com/e2rgcy1/mWPod8ter/tab.png"/>
</nav>

＆＃13;

＆＃13;

＆＃13;