0

これを作成しようとしています

助けが必要です

現時点での状況は次のとおりです(レスポンシブ部分を削除しました)

今の状態

基本的に、ドロップダウントライアングルを作成する方法にこだわっています。これにより、ドロップダウントライアングルが機能し、中央に配置されます。-ナビゲーションがcmsから出ているので、ナビゲーションポイントの正確な寸法(幅)がわかりません

基本的に私は脳が溶けてしまったようで、助けが必要です!

ps-cssはスケルトンを使用してコンパス/sassから来ています

4

2 に答える 2

2

三角形を疑似クラスで処理できるようになりました。

アイデアについては、このフィドルをご覧ください。

http://jsfiddle.net/carlosmartinezt/PwEyq/

ただし、あなたの場合、三角形の境界線も必要であり、それが難しくなります。最も手っ取り早い解決策は、代わりに画像を使用することだと思います。

于 2012-10-09T12:05:41.463 に答える
0

わかりました、次のように動作しました-私のjsfiddleを更新しました

.keith > li:hover {
  position: relative; background: #ffffff; border: 1px solid #005381;
  color:#005381;
  z-index: 100000;
}
.keith > li:hover:after, .keith > li:hover:before {
  top: 100%; border: solid transparent; content: " "; height: 0; width: 0; position:   absolute; pointer-events: none;
}
.keith > li:hover:after { border-color: rgba(255, 255, 255, 0); border-top-color: #ffffff; 
border-width: 10px; left: 50%; margin-left: -10px; }
.keith > li:hover:before { border-color: rgba(0, 83, 129, 0); 
border-top-color: #005381; border-width: 11px; left: 50%; margin-left: -11px; }
于 2012-10-09T15:01:25.907 に答える