Question

我抄袭了......＆lt;咳嗽> ... 借用 some code为我正在构建的网页创建垂直菜单。我没有太多麻烦就把自己的外观和感觉做好了。我遇到的问题是我似乎无法获得子菜单（第三层菜单）。我能够完成的最接近的工作就是通过重复使用#nav li:hover ul.subs { CSS代码，让子菜单中最轻微的部分显示在子菜单边框的右侧，我知道我不能。我觉得我的问题是没有完全理解如何编码#nav行以及我必须复制的代码部分以完成子子菜单。

Here is a link to my jfiddle代码。

因此，简而言之，我正在寻找的是：

用于子子块格式化的#nav代码的第一行
使这项工作需要其他代码块
GT符号的行有什么作用... ie：#nav li: hover > a {
它如何实际协同工作（css代码，而不是css3部分）
任何其他可能有帮助的花絮。

我查看了其他帖子，例如this，但它没有我需要的内容，或者至少没有提供关于某些内容如何或为什么起作用的非常好的解释需要什么来使它工作。此代码所来自的页面也没有令人满意的解释。这些家伙只是说，添加一些额外的代码来制作子子菜单......不是很有帮助。还要注意，这是一个纯CSS3垂直菜单的尝试... jQuery不需要应用。提前谢谢。

Answer 1

更新的代码：

＆＃13;

#nav,#nav ul {
    background-color: #8899AA;
    list-style: none outside none;
    margin: 0;
    padding: 0;
}
#nav {
    display: block;
    padding: 5px;
    position: relative;
    width: 112px;
    -moz-perspective: 200px;
    -ms-perspective: 200px;
    -webkit-perspective: 200px;
    -o-perspective: 200px;
    perspective: 200px;
}
#nav ul {
    left: -9999px;
    opacity:0;
    padding: 5px;
    position: absolute;
    top: -9999px;

    -moz-transform: rotateY(70deg);
    -ms-transform: rotateY(70deg);
    -o-transform: rotateY(70deg);
    -webkit-transform: rotateY(70deg);
    transform: rotateY(70deg);
 
    -moz-transform-origin: 0 0;
    -ms-transform-origin: 0 0;
    -o-transform-origin: 0 0;
    -webkit-transform-origin: 0 0;
    transform-origin: 0 0;
 
    -moz-transition: -moz-transform 0.3s linear, opacity 0.3s linear;
    -ms-transition: -ms-transform 0.3s linear, opacity 0.3s linear;
    -o-transition: -o-transform 0.3s linear, opacity 0.3s linear;
    -webkit-transition: -webkit-transform 0.3s linear, opacity 0.3s linear;
    transition: transform 0.3s linear, opacity 0.3s linear;
}
#nav li {
    background-color: #FFFFFF;
    position: relative;
}
#nav > li {
    -moz-transform-style: preserve-3d;
    -ms-transform-style: preserve-3d;
    -o-transform-style: preserve-3d;
    -webkit-transform-style: preserve-3d;
    transform-style: preserve-3d;
}
#nav li a {
    background-color: #AABBCC;
    border-color: #DDDDDD #555555 #555555 #DDDDDD;
    border-style: solid;
    border-width: 1px;
    color: #000000;
    display: block;
    font-size: 15px;
    padding: 8px 10px 8px 5px;
    text-decoration: none;
    width:95px;
 
    -moz-transition: all 0.2s linear;
    -ms-transition: all 0.2s linear;
    -o-transition: all 0.2s linear;
    -webkit-transition: all 0.2s linear;
    transition: all 0.2s linear;
}
#nav li:hover > a {
    background-color: #8899AA;
    border-color: #8899AA;
    color: #FFFFFF;
}
#nav li:hover > ul.subs {
    left: 112px;
    opacity:1;
    top: 0;
 
    -moz-transition-delay: 0.3s;
    -ms-transition-delay: 0.3s;
    -o-transition-delay: 0.3s;
    -webkit-transition-delay: 0.3s;
    transition-delay: 0.3s;
 
    -moz-transform: rotateY(0deg);
    -ms-transform: rotateY(0deg);
    -o-transform: rotateY(0deg);
    -webkit-transform: rotateY(0deg);
    transform: rotateY(0deg);
}
#nav ul li {
    width: 100%;
}

＆＃13;

<div class="container">
	<ul id="nav">
		<li><a href="#">Home</a></li>
		<li><a href="#">Menu 1</a>
			<ul class="subs">
				<li><a href="#">Submenu 1-1</a>
                    <ul class="subs">
                        <li><a href="#">Submenu 1-1-1</a></li>
                        <li><a href="#">Submenu 1-1-2</a></li>
                        <li><a href="#">Submenu 1-1-3</a></li>
                        <li><a href="#">Submenu 1-1-4</a></li>
                    </ul>
                </li>
				<li><a href="#">Submenu 1-2</a></li>
				<li><a href="#">Submenu 1-3</a></li>
				<li><a href="#">Submenu 1-4</a></li>
				<li><a href="#">Submenu 1-5</a></li>
			</ul>
		</li>
		<li><a href="#">Menu 2</a>
			<ul class="subs">
				<li><a href="#">Submenu 2-1</a></li>
				<li><a href="#">Submenu 2-2</a></li>
				<li><a href="#">Submenu 2-3</a></li>
				<li><a href="#">Submenu 2-4</a></li>
				<li><a href="#">Submenu 2-5</a></li>
				<li><a href="#">Submenu 2-6</a></li>
				<li><a href="#">Submenu 2-7</a></li>
				<li><a href="#">Submenu 2-8</a></li>
			</ul>
		</li>
		<li><a href="#">Menu 3</a>
			<ul class="subs">
				<li><a href="#">Submenu 3-1</a></li>
				<li><a href="#">Submenu 3-2</a></li>
				<li><a href="#">Submenu 3-3</a></li>
				<li><a href="#">Submenu 3-4</a></li>
				<li><a href="#">Submenu 3-5</a></li>
			</ul>
		</li>
		<li><a href="#">Menu 4</a></li>
		<li><a href="#">Menu 5</a></li>
		<li><a href="#">Menu 6</a></li>
	</ul>
</div>

＆＃13;

我做了什么：

[HTML] 移动最深的<ul> 其<li>家长（请参阅我的示例）
[CSS] 删除.subs1并改为使用.subs：然后，我们可以威胁所有子（sub（sub（...）））菜单方式
[CSS] 删除.subs1 CSS
[CSS] 删除#nav ul { overflow: hidden; }，以避免我们的子菜单被隐藏（因为它们位于父母的左侧）
[CSS] 将#nav li:hover ul.subs {}选择器更改为#nav li:hover > ul.subs {}，仅显示悬停元素时的第一个子菜单
[CSS] 将left: 114px更改为left: 112px，以避免在元素及其子菜单之间留出空格（如果您将此空间悬停，则不再悬停元素，然后隐藏子菜单

对于您的问题，>选择器仅定位直接孩子。示例：

<ul id="nav">
    <li>              <!-- #nav li [OR] #nav > li -->
        <ul>
            <li></li> <!-- #nav li [ONLY] -->
        </ul>
    </li>
</ul>

在CSS中配置子子垂直菜单

1 个答案: