0

この方法で作成された、いわゆる「ドロップダウン」リストがあります。

HTML:

<span><img src="images/searchall.png" alt=""/>
  <ul>
    <li>WORKSPACES</li>
    <li>REPORTS</li>
    <li>PEOPLE</li>
    <li>COMMENTS</li>
    <li>ANNOTATIONS</li>
  </ul>
</span>

CSS:

span {position:relative;}
span ul {position:absolute; display:none;}
span:hover > ul {display:block;}

私の問題は、 ul内の要素のspan:hover下に表示される必要があることです。すべての要素にインデックスを設定しようとしましたが、うまくいきません。imgspan

どうすればいいですか？

ulPS:内のマークアップに問題があることはわかっていspanます。心配ない。直します。現時点では、グラフィックの問題の方が重要です。ありがとう

4

4 に答える 4

0

これが希望どおりに機能するかどうかを確認してください。

span {float:left; width:200px;}
span img{float:left; width:200px;}
span ul {float:left; display:none;}
span:hover > ul {display:block;}

ボックスが垂直に割り当てることができるように、すべてのブロック要素をフロートさせ、それらのサイズを定義する必要があります。

于 2013-02-24T08:40:13.157 に答える
0 
span ul { z-index: 100; }
span:hover img { z-index: 101; }
于 2013-02-24T08:08:10.997 に答える
0

このCSSファイルを使用します。

span {position:relative;}
span ul {position:absolute; min-height:20px;}
span ul li {display:none;}
ul:hover > li {display:block;}

常に移動ulして制御するli

于 2013-02-24T08:10:10.807 に答える
0

IE7+のみを考慮しているようです。img の下に ul が必要な場合は、ul の z-index よりも大きい z-index を img に与える必要がありますが、img の下の ul の一部のコンテンツが表示されないことを考慮してください。jsfiddle.net/XLzmc/1/

于 2013-02-24T08:52:41.867 に答える