Large whitespace caused by hidden li items?

Question

I've got a menu that pops out of a list item. Something to this effect:

 <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>

Immediately underneath this li item I have this:

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

When I don't hover over the li item it gives me this effect:

enter image description here

When I hover over this li item it gives me this effect:

enter image description here

Great the menu works, my issue is the gap between the word "Back to top" with the li item, it is fairly large. I believe it is due to the invisible li items of the list. For anyone interested, the CSS is something to this effect:

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;
}

Simple classic visibility is hidden unless you hover, however, the whitespace between the word "Back to top" with the list item is too large.

Can you put together a [jsfiddle](http://jsfiddle.net)? Remember that `visibility: hidden;` keeps the element in flow despite it not being shown. — Adrift, Jul 30 '13 at 18:54
any reason youre using visibility instead of switching the display between none and whatever you want? That usually the simplest solution to problems like this. — Rooster, Jul 30 '13 at 18:56

score 3 · Accepted Answer · answered Jul 30 '13 at 18:59

3

visibility: hidden only makes the element invisible, but does not remove it from the page flow.

display: none will hide the element and remove it from the page flow (so it won't take up any space or affect other elements in any way).

answered Jul 30 '13 at 18:59

Ennui

10,102
3
35
42

score 1 · Answer 2 · edited Jul 31 '13 at 12:37

1

visibility : hidden only makes the element invisible, but does not remove it from the page flow. display: none will hide the element and remove it from the page flow (so it won't take up any space or affect other elements in any way)

ul.topmenu li ul
{
    display: none;
}

ul.topmenu li.submenu:hover ul
{
    display: block;
}

edited Jul 31 '13 at 12:37

Milche Patern

19,632
6
35
52

answered Jul 30 '13 at 18:57

Mohammad Masoudian

3,483
7
27
45

@MohamadMasoudian A little comment to explain what you mean ? Just to make sure your answer is not considered has low-quality. :) – Milche Patern Jul 30 '13 at 19:19
as @Ennui said : visibility: hidden only makes the element invisible, but does not remove it from the page flow. display: none will hide the element and remove it from the page flow (so it won't take up any space or affect other elements in any way). – Mohammad Masoudian Jul 30 '13 at 21:39

score 0 · Answer 3 · answered Jul 30 '13 at 18:56

0

visibility:hidden do not show element, but still reserves space for it.

Try display:none

answered Jul 30 '13 at 18:56

vmg

9,920
13
61
90

score 0 · Answer 4 · edited May 23 '17 at 10:31

Use the CSS display: none rule instead of visibilty: hidden, because you want your tag to not be displayed at all, you don't want a blank space allocated in it's place (see). From the W3 docs:

Please note that a display of 'none' does not create an invisible box; it creates no box at all. CSS includes mechanisms that enable an element to generate boxes in the formatting structure that affect formatting but are not visible themselves.

Also, what does the W3 validator say about your HTML?

Large whitespace caused by hidden li items?

4 Answers4