I have a menu that appears when hovering over a list item. Here is an example:
<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>
Directly below this li item, I have the following:
<li class="break">
<a href="#" title="Back to top" class="backtotop" style="font-size:x-small;">Back to top</a>
</li>
Without hovering over the li item, it looks like this:
When I hover over the li item, it changes to look like this:
The menu functions correctly, but my issue lies with the large space between the words "Back to top" and the list item. I suspect this gap is caused by invisible li items in the list. For those curious, the CSS code looks something like this:
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;
}
Simply put, classic visibility is set to hidden unless hovered over, but the whitespace between "Back to top" and the list item is too great.