• waagerechte Liste bei hover zusammenhalten

    From =?UTF-8?Q?Benno_M=c3=bcller?=@21:1/5 to All on Wed Jun 21 16:49:47 2017
    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;
    }

    --- SoupGate-Win32 v1.05
    * Origin: fsxNet Usenet Gateway (21:1/5)
  • From =?UTF-8?Q?Benno_M=c3=bcller?=@21:1/5 to All on Thu Jun 22 00:47:07 2017
    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

    --- SoupGate-Win32 v1.05
    * Origin: fsxNet Usenet Gateway (21:1/5)