css - CSSベースのメニューは単に表示なし/ブロックとz-indexを切り替えるだけですか？

Question

ドロップダウンメニューを機能させる方法（その背後にある理論）を理解しようとしているだけです。

display: none私が見たところ、それはCSSを使って、そしてblock一緒に遊んでいるだけz-indexです。

イベントはCSSクラスに添付されmouseoverてmouseout切り替えられます。

それは基本的にそれですか？

score 3 · Accepted Answer

親要素のホバースタイルに応じてメニュー項目に可視性を与えることができる別の方法があります。

li ul {display: none;}  
li:hover > ul {display: block;}

これは、使用するだけでメニューを作成できることを意味します

<ul id="menu">
    <li>
        some item
        <ul><li>sub item</li></ul>
    </li>
    <li>
        some other item
    </li>
<ul>

明らかに、すべてのリストに適用されないように、より多くのスタイルやクラスなどを投入する必要がありますが、それがcssメニューの背後にある一般的な概念です。

score 1 · Accepted Answer

CSSメニューは、アンカータグの：hoverプロパティを利用することもできます。これは、mouseover/mouseoutイベントと同じように機能します。

編集：おそらく：hoverプロパティは必ずしもアンカータグ上にある必要はありませんが、最も広く使用されています。

score 1 · Accepted Answer

メニューバーは、ドロップダウンメニューごとに横に並ん<ul>でいます<li>

ドロップダウンは垂直です<ul>

特別な .css が必要です:

"list-style: none <li>" を使用して箇条書きなどを取り除く
<li>「display: inline;」を使用する場合デフォルトの垂直ではなく水平レイアウト用
実際のクリック可能なメニュー項目の<a>内側には<li>、「padding: 10px 20px;」を使用します。(または他の寸法) より大きなマウスターゲット領域を作成します。

4 に答える 4