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

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