HTMLリスト/メニュー - 幅を自動的に変更できますか？ （ホバリング/スライドダウン用）

Question

私はさまざまなサブメニュー付きの垂直ドロップダウンメニューにhtmlリストを使用しています。各ナビゲーションポイントは、順序付けられていないリストのリスト項目です。

各サブナビゲーション要素は、最初は隠された別のリスト内の次のリストにあります。

トップエレメントが上がると、リストが下にスライドします。問題は、一番上のアイテムが最も幅の広いアイテムの全幅をとるため、マウスが実際にテキストの外にあるときに「トリガー」することです。

私はスパンをより具体的に先頭の項目内のテキストをターゲットにしようとしたが、マウスがテキストを離れると、問題がある新しいアイテムの上にマウスを移動しながら、メニューがスライド。

このトップナビゲーションアイテムにすべての子要素の幅がないようにする方法はありますか？

EDIT：

実際に私は最終的にそれを修正するために管理 - 問題は、それなしで、slidedownは下部の「ジャンプ」にメニューを引き起こしていたので、私はリスト全体の幅を宣言していたことでしたそれが滑り落ちた後、私はテキストが「アンラッピング」しているものと思われます。サブネッビング項目に幅が適用されている場合、リストはポップせず、「ターゲット」エリアは正確にトップポイントのみになります。私が正しく理解していれば

Answer 1

は、あなたのナビゲーションは次のようになります。

<ul> 
    <li>Nav Point 1 
     <ul> 
      <li>navigation item 1</li> 
      <li>navigation item 2</li> 
      <li>navigation item 3</li> 
     </ul> 
    </li> 
    <li>Nav Point 2 
     <ul> 
      .... 

項目はNAVポイントの構造内にあるナビゲーションは、私はポイントのサイズは、アイテムによって決定されるようになると思いますので、それが大きいと仮定して。あなたが望むものを達成するためには、別の構造を考慮する必要があると思います。

おそらく、2つのリストの別々のリストを扱うことができますか？最初のリストは最上位のナビゲーションポイントで、2番目のナビゲーションアイテムはナビゲーションアイテム付きです。スクリプトとCSSを使用して、2番目のリストを非表示にし、アイテムを対応するトップレベルのナビゲーションの下に表示します。あなたのスクリプトは、適切な場所で呼び出されたメニューを表示して非表示にします。一度に2つ以上を表示したい場合（つまり、マウスが移動した後にメニューが「残っている」場合）、スクリプトはナビゲーション項目のリストを別々の構造に分割する必要があります。

典型的な「リストのリスト」構造ほどシンプルではありませんが、より洗練されたディスプレイでもありますので、複雑になります。