Question

我正在尝试创建CSS菜单它的工作正常，但我有小问题，当鼠标结束时，也在边框，不覆盖所有菜单，它不会到底，这个图像解释更多{{ 0}}

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

Answer 1

您的图片高于文字的行高。

您需要调整img上的填充，使其与文本的高度相匹配。

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

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

在菜单中修复按钮大小

1 个答案: