在彈出的導航欄下方添加圖像（標簽）

Question

您可以在紅色邊框下方添加（圖像）選項卡，並且當光標在選項卡上時仍會響應。

我想要達到的目的是使該選項卡突出，並且當鼠標懸停在該選項卡上時，菜單會彈出。

這是一個示例，但是在紅色邊框上方或內部移動鼠標光標時，導航欄下方的選項卡是。 問題是選項卡也被隱藏了。

 * { 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; } 

 <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> 

Answer 1

這應該使您朝正確的方向前進。 如果您只想使用CSS（不使用JavaScript）來處理此問題，並且使其具有響應能力，尤其是當導航欄的高度發生變化時，我將設置媒體查詢，以在您確定的最佳斷點處為導航指定一個固定的高度。 使用固定高度的原因是，您可以每次將菜單偏移到該確切尺寸。

我將標簽頁圖像移到了HTML中，而不是將其用作背景圖像。 我注意到圖像周圍有很多空白。 我會縮小圖像並刪除它，以使在CSS中的放置更加容易。 我沒有對此進行更改，但是如果您這樣做，則需要稍作更改以適應新的圖像大小。 我有點捏住它的中心，但是多余的空白有點破壞了中心。 您真的想離開：50％，然后是圖像寬度一半的負邊距使其居中。

 * { 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; } 

 <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>