0

リスト項目から飛び出すメニューがあります。この趣旨の何か：

 <li>
          <ul class="topmenu">
              <li class="submenu">
                  <a class="otherIT" href="#" title="Common IT Tasks"><img src="./images/ittasks.png" alt="Common IT Tasks" /></a>
                  <a class="otherIT" href="#" title="Common IT Tasks">Other - Common IT Tasks</a>
                  <p>Most common IT tasks.</p>
                    <ul class="subsubmenu">
                        <li>
                            <a href="http://myURL.aspx/logticket.aspx" target="_blank" title="Log a ticket.">Log a ticket</a>
                        </li>
                        <li>
                            <a href="./batches/drives.bat" title="Run drives.bat file.">Map drives</a>
                        </li>
                        <li>
                            <a href="./batches/unlock.bat" title="Unlock a user's account.">Unlock a user</a>
                        </li>
                    </ul>
              </li>
          </ul>
      </li>

このliアイテムのすぐ下に、これがあります：

 <li class="break">
        <a href="#" title="Back to top" class="backtotop" style="font-size:x-small;">Back to top</a> 
      </li>

li アイテムにカーソルを合わせないと、次のような効果が得られます。

ここに画像の説明を入力

この li アイテムにカーソルを合わせると、次の効果が得られます。

ここに画像の説明を入力

メニューはうまく機能します。私の問題は、「トップに戻る」という言葉とliアイテムとの間のギャップです。かなり大きいです。リストの目に見えないliアイテムが原因だと思います。興味のある人にとっては、CSS は次のような効果があります。

ul.topmenu, ul.topmenu ul {
  display: block;
  margin: 0;
  padding: 0;
}

ul.topmenu li {
  display: inline;
  list-style: none;
  margin: 0;
  padding-right: 1.5em;
}

ul.topmenu li ul {
  visibility: hidden; }

  ul.topmenu li.submenu:hover ul {
  visibility: visible;
}

シンプルなクラシック表示はホバーしない限り隠されていますが、「トップに戻る」という単語とリスト項目の間の空白が大きすぎます。

4

4 に答える 4

3

visibility: hidden要素を非表示にするだけで、ページ フローから削除しません。

display: none要素を非表示にして、ページ フローから削除します (したがって、スペースを占有したり、他の要素に影響を与えたりすることはありません)。

于 2013-07-30T18:59:50.813 に答える
0

visibility:hidden要素を表示しませんが、そのためのスペースを予約します。

試すdisplay:none

于 2013-07-30T18:56:29.263 に答える
0

の代わりにCSS display: noneルールを使用しvisibilty: hiddenます。タグをまったく表示しないようにするため、その場所に空白を割り当てたくないからです ( 「 」を参照)。W3 ドキュメントから:

'none' を表示しても、非表示のボックスは作成されないことに注意してください。ボックスはまったく作成されません。CSS には、要素が書式設定に影響を与えるがそれ自体は表示されない書式設定構造でボックスを生成できるようにするメカニズムが含まれています。

また、W3 バリデーターは HTML について何と言っていますか?

于 2013-07-30T18:59:29.640 に答える