html - 如何在导航栏中放置图标

Question

您好，我已经创建了一个导航栏，我想在导航的开头放置一个主页图像图标。但是，当我尝试将其他元素向下移动或者当我将鼠标悬停在图标上时，悬停无法正常工作。

<div id="nav">
    <div id="nav_wrapper">
      <ul>
         <li class="icon-home"><a href="#"></a></li>

            <li id="et"> <a href="#">England</a>
                <ul>
                    <li><a href="Premiership.html">Premiership</a>
                    </li>
                    <li><a href= "#">Championship</a>
                    </li>
                    <li><a href="#">League 1</a>
                    </li>
                    <li><a href="#">League 2</a>
                    </li>
                </ul>
            </li>
            <li id="et"> <a href="#">France</a>
                <ul>
                    <li><a href="#">Ligue 1</a> 
                    </li>
                </ul>
            </li>
            <li id="et"> <a href="#">Germany </a>

                <ul>
                    <li><a href="#">Bundesliga</a>
                    </li>
                </ul>
            </li>
            <li id="et"> <a href="#">Italy</a>

                <ul>
                    <li><a href="#">Serie A</a>
                    </li>
                </ul>
            </li>
            <li id="et"> <a href="#">Spain</a>
                <ul>
                    <li><a href="#">La Liga</a>
                    </li>
                </ul>
            </li>
        </ul>    

    </div>
    <!-- Nav wrapper end -->

  </div>

在下面的链接中，我设法使标题对齐，但悬停效果不起作用。 http://jsfiddle.net/mxohL7kL/

Answer 1

主页链接中没有文字，这就是为什么您的悬停效果与其他链接的高度不同。您可以做的是，给主页 anchor 一个文本并将其隐藏。

<!-- HTML -->
<li class="icon-home"><a href="#"><span>Home</span></a></li>

//css
.icon-home a span {
    visibility:hidden;
}

see the example here