带有HTML CSS的多级导航栏

Question

<ul>
<li><a>A</a></li>
<li><a>B</a></li>
<li><a>C</a></li>
<li><a>D</a>
    <ul>
        <li><a>DA</a></li>
        <li><a>DB</a></li>
        <li><a>DC</a>
                <ul>
                    <li><a>DCA</a></li>
                    <li><a>DCB</a></li>
                    <li><a>DCC</a></li>
                    <li><a>DCD</a></li>
                </ul>
        </li>
        <li><a>DD</a></li>
    </ul>
</li>
<li><a>E</a>
    <ul>
        <li><a>EA</a></li>
        <li><a>EB</a></li>
        <li><a>EC</a></li>
        <li><a>ED</a></li>
    </ul>
</li>

我想在html和css（如果需要，也可以是js）中制作一个多级导航栏。我想显示相对于其父菜单的子菜单，而不是其parent（item），并且子菜单应与其父菜单一样长。我试图在所附图像中描述期望值。请有人用小提琴链接提供解决方案（如果可能）。

https://jsfiddle.net/razin/ngqe9obc/

Answer 1

you can use css selectors:

Adjacent sibling combinator The + combinator selects adjacent siblings. This means that the second element directly follows the first, and both share the same parent. Syntax: A + B Example: h2 + p will match all

elements that directly follow an . General sibling combinator The ~ combinator selects siblings. This means that the second element follows the first (though not necessarily immediately), and both share the same parent. Syntax: A ~ B Example: p ~ span will match all elements that follow a

.