私はこのメニューに基づいてしようとしているメニューを作成しています:
http://www.yootheme.com/widgetkit
ただし、メニュー項目の中央にカーソルを合わせると問題なく動作しますが、その端 (境界線がある場所) にカーソルを合わせると、それ自体と他のメニュー項目が移動するという小さな問題が発生しました。その前に 1px 右に。
私はかなりの時間コードをいじっていますが、理解できないようです。
HTML:
<div class="nav">
<ul>
<li><a href="index.html">Home</a></li>
<li class="active"><a href="index.html">Structure</a></li>
<li><a href="index.html">Buttons</a></li>
<li><a href="index.html">Forms</a></li>
<li><a href="index.html">Download</a></li>
</ul>
</div>
CSS:
.nav {
max-width: 100%;
}
.nav ul {
max-width: 100%;
margin: 0 auto;
background: #FFFFFF;
background: -webkit-linear-gradient(top, #FFFFFF 1%, #F5F6F6 100%);
background: -moz-linear-gradient(top, #FFFFFF 1%, #F5F6F6 100%);
background: -ms-linear-gradient(top, #FFFFFF 1%, #F5F6F6 100%);
background: -o-linear-gradient(top, #FFFFFF 1%, #F5F6F6 100%);
background: linear-gradient(top, #FFFFFF 1%, #F5F6F6 100%);
background-attachment: scroll;
background-clip: border-box;
background-origin: padding-box;
background-position: 0 0;
background-repeat: repeat-x;
background-size: 100% 100%;
border: 1px solid #c8c9ca;
border-radius: 6px 6px 6px 6px;
height: 40px;
}
.nav ul li {
margin-top: -1px;
padding-top: 1px;
float: left;
height: 39px;
list-style: none outside none;
}
.nav ul li:first-child {
border-left: none;
}
.nav ul li.active{
border-left: 1px solid #DCDDDE;
border-right: 1px solid #DCDDDE;
padding-top: 1px;
float: left;
list-style: none outside none;
background: -webkit-linear-gradient(center top , #F7F8F9 0%, #FBFCFD 15%, #FEFEFE 100%);
background: -moz-linear-gradient(center top , #F7F8F9 0%, #FBFCFD 15%, #FEFEFE 100%);
background: -ms-linear-gradient(center top , #F7F8F9 0%, #FBFCFD 15%, #FEFEFE 100%);
background: -o-linear-gradient(center top , #F7F8F9 0%, #FBFCFD 15%, #FEFEFE 100%);
background: linear-gradient(center top , #F7F8F9 0%, #FBFCFD 15%, #FEFEFE 100%);
border-left: 1px solid #DCDDDE;
border-top: 1px solid #D2D3D4;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05) inset;
color: #000000;
}
.nav ul li.active:hover{
padding-left: 1px;
padding-right: 1px;
}
.nav ul li:hover{
border-right: 1px solid #DCDDDE;
border-left: 1px solid #DCDDDE;
border-top: 1px solid #D2D3D4;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.07) inset;
color: #000000;
}
.nav ul li a {
float: left;
text-decoration: none;
display: block;
font-family: 'YanoneKaffeesatzLight', Arial, sans-serif;
height: 38px;
line-height: 38px;
padding-left: 22px;
padding-right: 22px;
display: block;
color: #444444;
font-size: 17px;
text-shadow: 0 1px 0 #FFFFFF;
}
.nav ul li a:hover{
padding-left: 21px;
padding-right: 21px;
}
適切なプレビュー用にJSFiddleも作成しました。
なぜこれが起こっているのかを理解し、可能な解決策を提供してくれる人はいますか? それはおそらく私が見ていない愚かなものです。