CSS menu doesn't work on old unicode.org

[stasoid]

Site: old unicode.org Problem: left menu doesn't work. Minirepro:

<style>

li
{
    position: relative;
    width: 1em;
}

li ul
{
    position: absolute;
    top: 0;
    left: 1em;
    display: none;
}

li:hover ul
{
    display: block;
}

</style>

<ul>
  <li>item
    <ul>
      <li>subitem</li>
    </ul>
  </li>
</ul>

This should display subitem when hovering item.

[TobiasBohnen]

Funny. I ran into the same problem today with this:

<style>
    p + div {
        display: none;
    }
    p:hover + div {
        display: inline-block;
    }
    p {
        display: inline-block;
    }
</style>

<p>p1</p>
<div>
    <p>123</p>
</div>

Seems to me that display:none prevents the creation of a render_item and a style change doesn't create one.

Edit: To generalize it: display changes are only handled properly, when they're in the same "family" (see element::create_render_item).

[tordex]

Currently changing of "display" css property doesn't handled correctly. Actually even is the element size is changed by :hover this will not handled by litehtml correctly.

Currently the only way to make menu compatible with litehtml is using visibility css property. Example:

<style type="text/css">
	ul.menu
	{
		display: block;
		list-style-type: none;
		padding: 10px;
		width: 6em;
	}

	ul.menu li
	{
		position: relative;
	}

	ul.menu li:hover
	{
		background-color: black;
		color: white;
	}

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

	ul.menu li:hover ul.submenu li:hover
	{
		background-color: darkgrey;
		color: white;
	}

	ul.submenu
	{
		width: 200px;
		top: 0;
		left: 6em;
		background-color: lightgray;
		position: absolute;
		display: block;
		visibility: hidden;
		list-style-type: none;
		padding: 10px;
	}
</style>

<ul class="menu">
	<li>Menu item1
		<ul class="submenu">
			<li>Submenu item1-1</li>
			<li>Submenu item1-2</li>
			<li>Submenu item1-3</li>
		</ul>
	</li>
	<li>Menu item2
		<ul class="submenu">
			<li>Submenu item2-1</li>
			<li>Submenu item2-2</li>
			<li>Submenu item2-3</li>
		</ul>
	</li>
	<li>Menu item3
		<ul class="submenu">
			<li>Submenu item3-1</li>
			<li>Submenu item3-2</li>
			<li>Submenu item3-3</li>
		</ul>
	</li>
</ul>