固定菜單中的按鈕大小

我正在嘗試創建CSS菜單，它的工作正常，但我得到的問題是，當鼠標停止時，也在邊框中，沒有覆蓋所有菜單，它無法到達底部，這是圖像解釋更多 enter image description here 固定菜單中的按鈕大小

 <nav id="main-nav" class="grid_12 main-nav"> 

      <ul> 
       <li><img src="style/menu.png" /></li> 
       <li><a href="http://webdesignerwall.com">Home</a></li> 
       <li><a href="http://themify.me">Themify</a></li> 
       <li><a href="http://icondock.com">IconDock</a> </li> 
       <li><a href="http://ndesign-studio.com">N.Design</a></li> 
      </ul> 
     </nav> 

**Css File 

    #main-nav { background: #51b2cc; margin-bottom: 60px ; margin-top: 10px; z-index: 100; 
     -webkit-box-shadow: 0px 3px 0px 0px #429db6; 
     -moz-box-shadow: 0px 3px 0px 0px #429db6; 
     box-shadow:   0px 3px 0px 0px #429db6;} 

    #main-nav ul { margin: 0; padding: 0;} 
    #main-nav li {display:inline-block;margin: 0;border-right: 2px #5dc9e6 solid;list-style: none;float: left;position: relative;} 
    #main-nav a {line-height: 100%;font-weight: bold;color: #fff;display: block;padding: 14px 15px;text-decoration: none;} 
    #main-nav img {line-height: 100%;font-weight: bold;color: #fff;display: block;padding: 14px 15px; background: #429db6;} 
    #main-nav a:hover {color: #fff;background: #429db6;}

來源

2014-01-14 Chlebta

提供[小提琴]（http://jsfiddle.net/）與您的問題 –

這是小提琴鏈接http://jsfiddle.net/T4mVe/ – Chlebta

你是如何修改' padding：14px 15px;'to'padding：16px 15px;'？ –

您的圖像比文本的行高還要高。

您需要調整img上的填充值，以使其匹配文本的高度。

http://jsfiddle.net/T4mVe/1/

#main-nav img { [ ... ] padding: 12px 15px; [ ... ] }

來源

2014-01-14 02:56:57 Ming

固定菜單中的按鈕大小

回答

相關問題