1

ナビゲーションバーを作っています。私がやりたいのは、ホバーすると、ホームと会社概要などの間にスペースがなくてもボックス/背景色が表示されることです..

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

}
4

1 に答える 1

0

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;}
于 2013-08-13T02:26:07.650 に答える