2

現在、このメガメニューを使用しています

http://demo.shymarkets.com/codecanyon/mega/model-1/css/index.html

ホバリング位置に関係なく、全幅のドロップダウン メニューが必要です。

まず、ドロップダウン メニュー項目で何をホバリングしているかをお見せしましょう。

ここに画像の説明を入力

ご覧のとおり、「4 COLS」にカーソルを合わせると、コンテナー全体がカバーされません。ドロップダウン メニューの左側がありません。

ホバリング位置に関わらず全幅にしたい。

custom.css ファイルの値を変更することでそれを達成しました。

http://demo.shymarkets.com/codecanyon/mega/model-1/css/css/custom.css

/* drop-down menu */
.dropdown-menu {
  position: absolute;
  top: 100%;
  **left: -1px;**
  z-index: 1000;
  display: none;
  float: left;

left: -1pxからleft: -120pxに変更すると、必要なものが得 られましたここに画像の説明を入力

ただし、今回は動的なものでも、おそらくレスポンシブなものでもありません。

前のメニュー項目の幅を計算して「左: ?」に書き込む必要があると思います。px'を自動的に、またはプログラムで言ってみましょう。

おそらく、これはこの種の jquery メソッドを使用して行うことができます。

子ul li aの幅を見つける方法

また、これらは私が欲しいもののいくつかの例です。ホバー動作をレスポンシブに変更するためにコードを変更する方法を知る必要があるだけです。

http://jsfiddle.net/jWSPz/4/ http://jsfiddle.net/jWSPz/9/

4

1 に答える 1