アコーディオンメニューにすると下部がずれます。

jQueryを使用してアコーディオンメニューを作成しています。
イメージとしてはこのサイトのようにしたいと考えています。
http://inkd.com/


しかしながらこちらのソースをベースに作ってみているのですが
http://blog-imgs-48-origin.fc2.com/j/q/u/jqueryi …

この方法で横に設置しようとすると、縦にアコーディオンするのに合わせて
コンテンツ全体が下がってしまう状況が生じています。

参考サイトのように、アコーディオンしてもメインコンテンツが動かない仕様に
したいのですがご教示頂けないでしょうか？
何卒よろしくお願いいたします。

No.2 ベストアンサー 回答者： ORUKA1951 回答日時： 2013/05/25 09:55

　jqeryでのサンプルは、そのまま使用しない場合は厄介ですね。

良く知ってなきゃ手が出せない。
★<div>に<menu>というIDをつけて、そのmenuというIDに対してz-indexをcssで指定してあげるという理解でいいのでしょうか？？
　デザインのためにHTMLは書かない!!これ原則です。
　要は、他の要素に影響させないためには、
・その要素をabsoluteで配置してしまう。
　　　・・置き場所を他の要素をrelativeで下げておく
のが簡単でしょう。　
　
　CSSのみで行うほうが楽かもしれません。クリックではなくポインターが乗ることで開きます。
　⇒ナビゲーションリストを様々にデザインしてみよう。( http://www.ichiya.com/WebService/Howto/sample/HT … )
　で[表示]→[スタイルシート]に進み、「横プルダウン」「横並びプルダウン2」「ページの最上部へ」「ヘッダーの下」が、その方法ですね。

この回答へのお礼

色々と試行錯誤したのですが、確かにCSSでやる方が楽な部分はありますね。
なんとかz-indexで対応できたのですが、まだまだ課題は残っており、別スレッドを立てさせて頂きます。ありがとうございます。

お礼日時：2013/05/29 21:14

No.1 回答者： ORUKA1951 回答日時： 2013/05/22 18:50

position:absoluteかfloatで他の要素から切り離す。

その場合、z-indexで前面に持ってきておかないと、後出の要素が上にかぶさってしまいます。

この回答への補足

ご教示頂き誠にありがとうございます。
ここ数日間、参考にしているサイトのソースを見てみたところ
確かにz-indexの記述がありました。

ただ、この記述が多用されている作りになっていたため、いまいちソースを見ていてもピンとこなかったのですが、例えば、
<div>に<menu>というIDをつけて、そのmenuというIDに対してz-indexをcssで指定してあげるという理解でいいのでしょうか？？
（そのmenuの中にプルダウンメニューを入れ込むいめーじです。）

お手数をおかけしますがご教示のほど、よろしくお願いいたします。

補足日時：2013/05/25 09:12