htmlのドロップダウンメニューにある私のタブ

Question

私は学校のウェブサイトを作成していて、ホバーブルドロップダウンメニューで構成されています。

問題は、私は、メニューの上にマウスを置く史上時にアイテムのドロップダウンがドロップダウンタブが並んでいない。ここ

画像があなたの問題は主に周りにあるものと思わあなた

Answer 1

を表示するようにしていることですボックスの位置。 absoluteポジショニングを使用する場合は、常にコンテンツの位置を指定する必要があります。これにより、あなたが望む場所に正確に位置するのではなく、あなたのサブメニューを飛行させないようにします。また、親要素の位置がrelativeであることを確認してください。サブメニューがボックスプロパティを継承するようにしてください。

.firstlevel-menu-item { 
    position: relative; 
} 
.my-submenu { 
    position: absolute; 
    top: 100%;    /* 100% of firstlevel menu's height */ 
    left: 0;    /* align to firstlevel menu's left side */ 
    width: 100%;   /* width of firstlevel menu */ 
} 

コンテンツを親ボックスの端に合わせると問題が解決するはずです。

enlightenmentのJSFiddleがあります。

絶対位置/相対位置に依存するドロップダウンメニューやその他のさまざまな機能を構築することが非常に重要なので、ボックスの位置についてもう少し詳しく調べることをお勧めします。