html - 菜单链接旁边的图标 CSS

Question

嘿，我在链接旁边有图标时遇到了一些麻烦所以首先我找不到可以移动文本的位置，以便图标正确显示而不是在文本下方。其次，当您将鼠标悬停在文本上时，图标会消失。

我做了一个脚本，你可以看看 https://jsfiddle.net/8nxrwbog/

感谢您的帮助!

Answer 1

#menu-bar {
  width: 100%;
  line-height: 40px;
  position:relative;
  z-index:999;
}
#menu-bar li {
  background-color:black;
  float: left;
  position: relative;
  list-style: none;
}
#menu-bar a {
  font-weight: bold;
  font-family: arial;
  font-style: normal;
  font-size: 12px;
  color: #E7E5E5;
  text-decoration: none;
  display: block;
  padding: 6px 10px 4px 10px;
  margin: 0;
}
#menu-bar li ul li a {
  margin: 0;
}
#menu-bar li:hover > a {
	background-color: #0083c2;
    transition-delay: .1s;
	transition-duration: .8s;
}
#menu-bar .nav-button-home a { 
background:url("http://overnine.servergamers.net/3/images/icons/home20x20.png") no-repeat 0 13px;  padding-left: 22px
}

<ul id="menu-bar">
   <li class="nav-button-home"><a href="#">Home</a></li>
   <li class="nav-button-home"><a href="#">Teams</a>
   <li class="nav-button-home"><a href="#">Sponsors</a></li>
   <li class="nav-button-home"><a href="#">WebTV</a></li>
   <li class="nav-button-home"><a href="#">Contact</a></li>
</ul>

要移动图标旁边的文本，您可以为#menu-bar .nav-button-home a 设置 padding-left

例如:padding-left: 22px;

图标消失是因为您将整个背景更改为一种颜色。要仅更改背景颜色，您必须在 #menu-bar li:hover > a.-c

中将“背景”更改为“背景颜色”