waagerechte Liste bei hover zusammenhalten

[Benno Müller]

hi,

wenn per hover untergeordnete Elemente aufgeklappt werden, schaffen die
sich im folgenden Bespiel immer Platz.
Wie kann oder wie würdet ihr das verhindern.
Möglichst ohne Javascript.

Benno


----------------------- HTML:
<header>
<nav>
<ul>
<li><a href="1" title="W1">W1</a></li>
<li><a href="2" title="W2">W2</a></li>
<li><a href="U0">U0</a>
<ul>
<li><a href="">U1</a></li>
<li><a href="" title="U2">U2</a>
<ul>
<li><a href="" title="U2a">U2a</a></li>
<li><a href="" title="U2b">U2b</a></li>
</ul>
</li>
<li><a href="" title="U3">U3</a></li>
<li><a href="" title="U4">U4</a></li>
</ul>
</li>
<li><a href="" title="W8">W8</a></li>
<li><a href="" title="W9">W9</a></li>
<li><a href="" title="W10">W10</a></li>
</ul>
</nav>
</header>

----------------------- CSS:
header { z-index:0; }
header nav ul { border:1px solid red;
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
z-index:666;
}

header nav ul li {
float: left;
position:relative;
left:0;
z-index:670;
}
header nav ul li ul {
background-color:orange;
display: none;
z-index:666;
}

header nav ul li:hover > ul {
display: block;
}


li a {
background-color:yellow;
display: inline-block;
color: green;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}

[Benno Müller]

hi,

Am 21.06.2017 um 16:49 schrieb Benno Müller:
> hi,
>

> wenn per hover untergeordnete ...

( sorry - I didn't recognize that this group is english speaken :| )

so:
see the code of the above posting ...
by opening second-level elements with a first-level-element-hover,
they stretch space between the upper first-level elements.
How I can prevent that and keep the upper navigation lines together like
they were before - without Javascript?
benno