我在这里查看了一些教程和其他问题，但无法理解其中的一些代码。我尝试在评论部分提出后续问题，但我无法做到，因为我刚刚加入 StackOverflow，而且没有很高的声誉。
我正在使用 CSS 进行 3 级导航练习，但遇到了一些小问题。 我遇到的问题是让第 3 级与第 2 级下拉“对齐”到位。如果您有时间，下面是 jsfiddle。
http://jsfiddle.net/JustALittleHeat/4KnP2/3/#&togetherjs=akTj3NGGcf
你会看到它是一个水平导航栏 HOME CATEGORIES WORK ABOUT 等等... 当您将鼠标悬停在 WORK 菜单上时，它会垂直下降，然后当您将鼠标悬停在该层的菜单项上时，它们会在右侧显示另一个子菜单。但是右侧的子菜单不会向下移动以匹配其对应的父菜单。我的代码中缺少什么来“捕捉”它？与元素选择器的路径相反，声明类是否限制了我获得所需结果的能力？
谢谢
<!doctype html>
<html>
<head>`enter code here`
<meta charset="UTF-8">
<title>Untitled Document</title>
<link rel="stylesheet" type="text/css" href="Assets/styles2.css"
</head>
<body>
<ul id="menu">
<li class ="menuHeader"><a class="menuHeaderText" href="#">Home</a></li>
<li class ="menuHeader"><a class="menuHeaderText" href="#">Categories</a>
<ul class="dropDown">
<li class="subMenu"><a class="subMenuText" href="#">CSS</a></li>
<li class="subMenu"><a class="subMenuText" href="#">Graphic Design</a></li>
<li class="subMenu"><a class="subMenuText" href="#">Development</a></li>
<li class="subMenu"><a class="subMenuText" href="#">Web Design</a></li>
</ul>
</li>
<li class ="menuHeader"><a class="menuHeaderText" href="#">Work</a>
<ul class="dropDown">
<li class="subMenu"><a class="subMenuText" href="#">Company A</a>
<ul class="dropDown2">
<li class="lvl2SubMenu"><a class="lvl2subMenuText" href="#">Branding</a></li>
<li class="lvl2SubMenu"><a class="lvl2subMenuText" href="#">Advertising</a></li>
</ul>
</li>
<li class="subMenu"><a class="subMenuText" href="#">Company B</a>
<ul class="dropDown2">
<li class="lvl2SubMenu"><a class="lvl2subMenuText" href="#">Marketing</a></li>
<li class="lvl2SubMenu"><a class="lvl2subMenuText" href="#">Copywriting</a></li>
</ul>
</li>
<li class="subMenu"><a class="subMenuText" href="#">Company C</a>
<ul class="dropDown2">
<li class="lvl2SubMenu"><a class="lvl2subMenuText" href="#">Advertising</a></li>
<li class="lvl2SubMenu"><a class="lvl2subMenuText" href="#">Copywriting</a></li>
</ul>
</li>
<li class="subMenu"><a class="subMenuText" href="#">Company D</a>
<ul class="dropDown2">
<li class="lvl2SubMenu"><a class="lvl2subMenuText" href="#">Branding</a></li>
<li class="lvl2SubMenu"><a class="lvl2subMenuText" href="#">Marketing</a></li>
<li class="lvl2SubMenu"><a class="lvl2subMenuText" href="#">Copywriting</a></li>
</ul>
</li>
</ul>
</li>
<li class ="menuHeader"><a class="menuHeaderText" href="#">About</a>
<ul class="dropDown">
<li class="subMenu"><a class="subMenuText" href="#">Company</a></li>
<li class="subMenu"><a class="subMenuText" href="#">Team</a></li>
</ul>
</li>
<li class ="menuHeader"><a class="menuHeaderText"href="#">Contact</a></li>
</ul>
</body>
</html>
@charset "UTF-8";
/* CSS Document */
#menu, #menu ul {margin:0; padding:0; list-style:none; z-index:0;}
#menu {width: 960px; height: 40px; margin:60px auto; border: 1px solid #222;background-color:#111;
background-image: -moz-linear-gradient(#555, #444 5%, #333 15%, #999 25%, #111 75%);
background-image: -o-linear-gradient(#555, #444 5%, #333 15%, #999 25%, #111 75%);
background-image: -webkit-linear-gradient(#555, #444 5%, #333 15%, #999 25%, #111 75%);
background-image: linear-gradient(#555, #444 5% ,#333 15%, #999 25%, #111 75%);
border-radius:6px; box-shadow: 0px 0px 1px #333, 1px 1px 2px #FFF inset; Transition:all 1s ease-in-out; }
.menuHeader {float:left; border-left:thin solid rgba(153,204,255,0.3); position:relative;
-moz-transition:all 1s ease-in-out;
Transition:all 0.3s ease-in-out;}
.menuHeader:hover {background-image: -moz-linear-gradient(#555, #777 5%, #555 15%, #FFF 25%, #111 75%);
box-shadow: 1px 1px 4px #FFF inset }
.menuHeaderText {float:left; padding:12px 30px; text-decoration:none; color:white; font-family:Arial, Helvetica, sans-serif; font:bold; font-size:14px;}
.dropDown { width:120%; opacity:0; visibility:hidden; position:absolute; top: 38px; z-index:1;
background:#444; box-shadow:1px 1px 2px #333; Transition:all 0.2s ease-in-out;}
.subMenuText {width:90%; float:left; padding:5%; text-decoration:none; color:white;
font-family:Arial, Helvetica, sans-serif; border-bottom:thin solid rgba(153,204,255,0.3);
Transition:all 0.2s ease-in-out;}
.dropDown a:hover {background:rgba(0%,80%,100%,1); width:90%; }
#menu li:hover > ul {opacity:1; visibility:visible; margin:0;}
.dropDown2 { width:120px; opacity:0; visibility:hidden; position:absolute; display:inline-block; left:100%; z-index:1;
background:#444; box-shadow:1px 1px 2px #333; Transition:all 0.2s ease-in-out;}
.lvl2subMenuText {width:90%; float:left; padding:5%; text-decoration:none; color:white;
font-family:Arial, Helvetica, sans-serif; border-bottom:thin solid rgba(153,204,255,0.3);
Transition:all 0.2s ease-in-out;}
#menu li ul li:hover > ul li {opacity:1; visibility:visible; margin:0;}
最佳答案
http://jsfiddle.net/4KnP2/4/ 这应该做你想要的
float:left 更改为 display:inline-block on .subMenuText
关于CSS 3 级导航对齐父级，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/21344841/