Question

我正在制作导航栏。我想要做的是当悬停时它将显示框/背景颜色，而没有Home和About Us之间的空间等等。

与此处http://www.w3schools.com/css/css_navbar.asp一样，在演示：导航栏中。谢谢！

HTML代码

<li><a href="index.html">Home</a></li>
<li><a href="aboutus.html">About Us</a></li>
<li><a href="services.html">Services</a></li>
<li><a href="projects.html">Projects</a></li>
<li><a href="contactus.html">Contact Us</a></li>

</ul>

</div>

CSS代码

#MenuContainer {
width:441px;
float:right;
overflow:hidden;
text-align:right;
    }

  #MenuContainer #loginContainer {
width:441px;
float:left;
overflow:hidden;
 }

  #MenuContainer #MenulistContainer {
width:441px;
float:left;
overflow:hidden;
margin-top:12px;
  }

  #MenuContainer #MenulistContainer .menuList li {
list-style:none;
display:inline;
font-family:Arial, Helvetica, sans-serif;
font-size:10pt;
padding:0 0 0 10px;
  }

 #MenuContainer #MenulistContainer .menuList li a {
color:#000000;
text-decoration:none;
 }

 #MenuContainer #MenulistContainer .menuList li a:hover {
background-color:#003e7e;
text-decoration:#ffffff;
color:#ffffff;
padding: 0px;
list-style-type: none;

}

Answer 1

http://jsfiddle.net/g5JKU/

检查这个小提琴。

杀死li上的边距并添加间距填充。

.menuList > li{float:left;list-style:none;margin:0;padding:0 15px; background-color:green;}
.menuList > li:hover{background-color:red;}

悬停盒之间没有空格？

1 个答案: