それで、
固定幅のサイト用のカスタム メニューを作成しています。実際には、DIV (各メニュー項目の DIV) で構成された単なる水平行である「メニュー」を作成しようとしています。達成しようとしている機能を伝えるために画像を含めました。
画像では、図1DIV の最上位の行です。図 2 は、カーソルを最上位の項目「Professional development」の上に置いたときに行がどうなるかを示しています。この div はメニュー領域全体の幅を埋めるように拡張され、サブメニュー項目として機能している他のいくつかの DIV が表示されます。最後に、図 3 は、コンテナーの左側にまだない最上位の div にカーソルを合わせるとどうなるかを示しています。 Item" は左に移動するため、その子 DIV は右にあります。
Jquery を使用して展開する DIV をアニメーション化したり、アコーディオンを作成したりできましたが、特に複数のトップレベルの項目が関係しているため、この種のアニメーションを作成する方法がわかりません。どんな助けでも大歓迎です！
-マルカ
編集：
CSSホバー疑似クラスを介していくつかのボタンで目的の機能を実現するJSfiddleを追加しましたが、JQueryで変更をアニメーション化する方法が途方に暮れています。「Professional Development」にカーソルを置くと、その div が左右に展開され、サブメニュー項目として機能する他の div が表示されますが、CSS だけで期待されるように、展開は瞬時に行われます。