固定菜单中的按钮大小

我正在尝试创建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

固定菜单中的按钮大小

回答

相关问题