0

だから私は私が作っているこのナビゲーションバーを持っています。私はデモンストレーションするJsfiddleを持っています。要素にカーソルを合わせると、サブリストが表示されますが、よく見ると、その左端は、それを呼び出した navbar 要素のわずか 1 ピクセル前にあります。

これを取り除くために追加できるCSSルールはありますか?つまり、サブリストを1ピクセル戻しますか? 私はJSでこれを達成できることを知っています（すべてのnavbar要素を取得し、左からの距離を計算し、そのサブリストを取得して、要素の左の値より1少ない左の値を与えます）が、今のところ私はしたいと思います今のところ避けてください。

可能であれば CSS ソリューションを希望しますが、もちろんそうではありません。教えてください。可能であれば、JS の代替案を提供してください。

4

3 に答える 3

1

に追加margin-left: -1px;して、#nav li:hover ul1ピクセル左にプッシュします。

ここで動作することを確認してください。

于 2012-06-08T07:43:29.587 に答える
1

救助への負のマージン http://jsfiddle.net/pZy8V/4/

#nav li:hover ul {
    display: block;
    position: absolute;
    margin: 0 0 0 -1px; /* margin: 0; */
    list-style: none;
    padding: 0;
}
#nav li:hover li {
    float: none;
}
于 2012-06-08T07:42:40.753 に答える
0

すべての境界線を削除すると、問題はなくなります。したがって、答えは HTML/CSS ボーダーの使用法を再設計することにあるかもしれません

この改訂されたJSFiddleを参照してください

簡単で汚い修正が必要な場合は、元の CSS に以下を追加できます。

#nav li {
    float: left;
    position:relative;
    left:-1px;
}
于 2012-06-08T07:41:19.730 に答える