再次返回此处。我正在尝试完成有关Wordpress安装的导航。我没有考虑我需要的三层导航。
我的前两层按我的意愿显示，但是最后一层显示在第二层下面。希望它显示在父母的右边。我试图更改多行代码，但整个导航最终都中断了。
我创建了一个JS小提琴，并删除了所有有用的代码
https://jsfiddle.net/jackniksmith/6y38jv1g/8/
HTML
<!DOCTYPE html>
<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]> <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!-->
<html ng-app="curriculum" class="no-js">
<!--<![endif]-->
<body>
<header>
<div class="inner">
<div id="navigation">
<nav class="nav-main">
<div class="menu-menu-main-container">
<ul id="menu-menu-main" class="menu">
<li id="menu-item-138" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-home current-menu-item page_item page-item-77 current_page_item menu-item-138"><a href="#" aria-current="page">Home</a></li>
<li id="menu-item-14005" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children menu-item-14005"><a href="#">About</a>
<ul class="sub-menu">
<li id="menu-item-14017" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-14017"><a href="#">About Us</a></li>
<li id="menu-item-14018" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-14018"><a href="#">Vision, ethos and mission aims</a></li>
<li id="menu-item-14019" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-14019"><a href="#">Ofsted Report 2017</a></li>
<li id="menu-item-14020" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-14020"><a href="#">Governance</a></li>
<li id="menu-item-14021" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-14021"><a href="#">Quotes and Parental Views</a></li>
<li id="menu-item-14022" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-14022"><a href="#">Pupil Leadership</a></li>
<li id="menu-item-14023" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-14023"><a href="#">The Decus Educational Trust</a></li>
<li id="menu-item-14024" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-14024"><a href="#">Image Gallery</a></li>
</ul>
</li>
<li id="menu-item-14026" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children menu-item-14026"><a href="#">Parents</a>
<ul class="sub-menu">
<li id="menu-item-14025" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-14025"><a href="#">Attendance</a></li>
<li id="menu-item-14027" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children menu-item-14027"><a href="#">Letters</a>
<ul class="sub-menu">
<li id="menu-item-14028" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-14028"><a href="#">Letter Bank</a></li>
<li id="menu-item-14029" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-14029"><a href="#">Newsletters and Learning Letters</a></li>
</ul>
</li>
<li id="menu-item-14030" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children menu-item-14030"><a href="#">Safeguarding</a>
<ul class="sub-menu">
<li id="menu-item-14031" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-14031"><a href="#">Safeguarding</a></li>
<li id="menu-item-14032" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-14032"><a href="#">Online Safety</a></li>
</ul>
</li>
<li id="menu-item-14033" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-14033"><a href="#">Out of Hours Activities</a></li>
<li id="menu-item-14034" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-14034"><a href="#">PTA</a></li>
<li id="menu-item-14035" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children menu-item-14035"><a href="#">Inclusion</a>
<ul class="sub-menu">
<li id="menu-item-14036" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-14036"><a href="#">SEND and Inclusion</a></li>
<li id="menu-item-14037" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-14037"><a href="#">Anti-Bullying</a></li>
<li id="menu-item-14038" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-14038"><a href="#">Pupil Premium Checklist</a></li>
</ul>
</li>
<li id="menu-item-14039" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children menu-item-14039"><a href="#">Key Information</a>
<ul class="sub-menu">
<li id="menu-item-14040" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-14040"><a href="#">Term Dates</a></li>
<li id="menu-item-14041" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-14041"><a href="#">Uniform</a></li>
<li id="menu-item-14042" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-14042"><a href="#">Lost Property</a></li>
<li id="menu-item-14043" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-14043"><a href="#">SchoolComms</a></li>
<li id="menu-item-14044" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-14044"><a href="#">School Menu</a></li>
</ul>
</li>
<li id="menu-item-14045" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-14045"><a href="#">Nursery</a></li>
<li id="menu-item-14046" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children menu-item-14046"><a href="#">Supporting your child’s learning</a>
<ul class="sub-menu">
<li id="menu-item-14047" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-14047"><a href="#">Supporting your child’s learning</a></li>
<li id="menu-item-14048" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-14048"><a href="#">Useful Websites</a></li>
</ul>
</li>
<li id="menu-item-14049" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-14049"><a href="#">Admissions</a></li>
</ul>
</li>
<li id="menu-item-88" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-88"><a href="#">Curriculum</a></li>
<li id="menu-item-124" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-124"><a href="#">Contact</a></li>
</ul>
</div>
</nav>
<nav class="sub-nav">
<div class="menu-sub-menu-container">
<ul id="menu-sub-menu" class="menu">
<li id="menu-item-1701" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-1701"><a href="#">Calendar</a></li>
<li id="menu-item-13879" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-13879"><a href="#">Facebook</a></li>
<li id="menu-item-13880" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-13880"><a href="#">Twitter</a></li>
<li id="menu-item-13881" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-13881"><a href="#">YouTube</a></li>
<li id="menu-item-112" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-112"><a href="#">Policies</a></li>
<li id="menu-item-5139" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-5139"><a href="#">Vacancies</a></li>
</ul>
</div>
</nav>
</div>
</div>
</header>
</body>
</html>
CSS
body { background: #e6eef2; }
header { background: #FFFFFF; overflow: auto; }
.inner { width: 1000px; margin: 0 auto; }
.main { width: 1000px; margin: 0 auto; background: #FFFFFF;
overflow: auto; }
.home-section { padding: 60px 0; overflow: auto; position:
relative; }
#logo { width: 250px; padding: 40px 0; float: left; }
#logo-img { width: 100%; }
.nav-main { float: right; position: relative; }
.nav-main ul { text-align: right; font-size: 18px; padding-top:
35px; }
.nav-main ul li { display: inline-block; margin-left: 15px;
position: relative; }
.nav-main ul li a { color: #666; text-decoration: none; }
.nav-main ul ul { display: none; position: absolute; left: 0;
width: 150px; padding: 0; left: 0; margin: 0; text-align:
left; }
.nav-main ul ul li { background: grey; padding: 5px 10px;
margin-left: 0; z-index: 999999; }
.nav-main ul ul li a { padding: 0; }
.nav-main ul li:hover>ul { display: block; }
.sub-nav { float: right; clear: right; }
.sub-nav ul { text-align: right; font-size: 14px; margin: 0 0
15px 0; }
.sub-nav ul li { display: inline-block; margin-left: 15px; }
.sub-nav ul li h2 { font-size: 14px; font-weight: normal;
margin: 0; }
.sub-nav ul li a { color: #999; text-decoration: none; }
#navigation { float: right; width: 50%; position: absolute; left: 482px; }
例如，如果您转到“父母”>“字母”。在字母悬停时，第三层将显示在下方。
如果有人能够解释我的缺失，我将非常感激。
谢谢
杰克
答案 0 :(得分：0)
在CSS下方替换：
body {
background: #e6eef2;
}
header {
background: #FFFFFF;
overflow: auto;
}
.inner {
width: 1000px;
margin: 0 auto;
}
.main {
width: 1000px;
margin: 0 auto;
background: #FFFFFF;
overflow: auto;
}
.home-section {
padding: 60px 0;
overflow: auto;
position: relative;
}
#logo {
width: 250px;
padding: 40px 0;
float: left;
}
#logo-img {
width: 100%;
}
.nav-main {
float: right;
position: relative;
}
.nav-main ul {
text-align: right;
font-size: 18px;
padding-top: 35px;
}
.nav-main ul li {
display: inline-block;
margin-left: 15px;
position: relative;
}
.nav-main ul li a {
color: #666;
text-decoration: none;
}
.nav-main ul ul {
display: none;
position: absolute;
left: 0;
width: 150px;
padding: 0;
margin: 0;
text-align: left;
top:20px;
background: grey;
}
.nav-main ul ul ul {
display: none;
position: absolute;
left: 150px;
width: 150px;
padding: 0;
top: 10px;
margin: 0;
text-align: left;
background: #CCC;
}
.nav-main ul ul li {
padding: 5px 10px;
margin-left: 0;
width:100%;
z-index: 999999;
}
.nav-main ul ul li a {
padding: 0;
}
.nav-main ul li:hover>ul {
display: block;
}
.sub-nav {
float: right;
clear: right;
}
.sub-nav ul {
text-align: right;
font-size: 14px;
margin: 0 0 15px 0;
}
.sub-nav ul li {
display: inline-block;
margin-left: 15px;
}
.sub-nav ul li h2 {
font-size: 14px;
font-weight: normal;
margin: 0;
}
.sub-nav ul li a {
color: #999;
text-decoration: none;
}
#navigation {
float: right;
width: 50%;
position: absolute;
left: 482px;
}
答案 1 :(得分：0)
您的问题是，您正在<li>而不是<ul>上设置z-index值。
删除<li>上的z-index值，并在<ul>上设置一个索引值：
.nav-main ul li:hover > ul {
display: block;
z-index: 1;
}
您只需要此声明。由于sub-sub菜单是第一个菜单的子菜单，因此它将位于其上方，因为它的z索引也为1。查看此article可以更好地了解z-index（有很多类似的东西）。
然后，如果要将第二个子菜单显示在其父级的左侧，只需添加以下行：
.nav-main ul ul ul {
left: 100%;
top: 0;
}
body {
background: #e6eef2;
}
header {
background: #FFFFFF;
overflow: auto;
}
.inner {
width: 1000px;
margin: 0 auto;
}
.main {
width: 1000px;
margin: 0 auto;
background: #FFFFFF;
overflow: auto;
}
.home-section {
padding: 60px 0;
overflow: auto;
position: relative;
}
#logo {
width: 250px;
padding: 40px 0;
float: left;
}
#logo-img {
width: 100%;
}
.nav-main {
float: right;
position: relative;
}
.nav-main ul {
text-align: right;
font-size: 18px;
padding-top: 35px;
}
.nav-main ul li {
display: inline-block;
margin-left: 15px;
position: relative;
}
.nav-main ul li a {
color: #666;
text-decoration: none;
}
.nav-main ul ul {
display: none;
position: absolute;
left: 0;
width: 150px;
padding: 0;
left: 0;
margin: 0;
text-align: left;
}
.nav-main ul ul li {
background: grey;
padding: 5px 10px;
margin-left: 0;
}
.nav-main ul ul ul {
left: 100%;
top: 0;
}
.nav-main ul ul ul li {
background: red;
}
.nav-main ul ul li a {
padding: 0;
}
.nav-main ul li:hover > ul {
display: block;
z-index: 1;
}
.sub-nav {
float: right;
clear: right;
}
.sub-nav ul {
text-align: right;
font-size: 14px;
margin: 0 0 15px 0;
}
.sub-nav ul li {
display: inline-block;
margin-left: 15px;
}
.sub-nav ul li h2 {
font-size: 14px;
font-weight: normal;
margin: 0;
}
.sub-nav ul li a {
color: #999;
text-decoration: none;
}
#navigation {
float: right;
width: 50%;
position: absolute;
left: 482px;
}<!DOCTYPE html>
<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]> <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!-->
<html ng-app="curriculum" class="no-js">
<!--<![endif]-->
<body>
<header>
<div class="inner">
<div id="navigation">
<nav class="nav-main">
<div class="menu-menu-main-container">
<ul id="menu-menu-main" class="menu">
<li id="menu-item-138" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-home current-menu-item page_item page-item-77 current_page_item menu-item-138"><a href="#" aria-current="page">Home</a></li>
<li id="menu-item-14005" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children menu-item-14005"><a href="#">About</a>
<ul class="sub-menu">
<li id="menu-item-14017" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-14017"><a href="#">About Us</a></li>
<li id="menu-item-14018" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-14018"><a href="#">Vision, ethos and mission aims</a></li>
<li id="menu-item-14019" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-14019"><a href="#">Ofsted Report 2017</a></li>
<li id="menu-item-14020" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-14020"><a href="#">Governance</a></li>
<li id="menu-item-14021" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-14021"><a href="#">Quotes and Parental Views</a></li>
<li id="menu-item-14022" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-14022"><a href="#">Pupil Leadership</a></li>
<li id="menu-item-14023" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-14023"><a href="#">The Decus Educational Trust</a></li>
<li id="menu-item-14024" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-14024"><a href="#">Image Gallery</a></li>
</ul>
</li>
<li id="menu-item-14026" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children menu-item-14026"><a href="#">Parents</a>
<ul class="sub-menu">
<li id="menu-item-14025" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-14025"><a href="#">Attendance</a></li>
<li id="menu-item-14027" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children menu-item-14027"><a href="#">Letters</a>
<ul class="sub-menu">
<li id="menu-item-14028" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-14028"><a href="#">Letter Bank</a></li>
<li id="menu-item-14029" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-14029"><a href="#">Newsletters and Learning Letters</a></li>
</ul>
</li>
<li id="menu-item-14030" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children menu-item-14030"><a href="#">Safeguarding</a>
<ul class="sub-menu">
<li id="menu-item-14031" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-14031"><a href="#">Safeguarding</a></li>
<li id="menu-item-14032" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-14032"><a href="#">Online Safety</a></li>
</ul>
</li>
<li id="menu-item-14033" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-14033"><a href="#">Out of Hours Activities</a></li>
<li id="menu-item-14034" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-14034"><a href="#">PTA</a></li>
<li id="menu-item-14035" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children menu-item-14035"><a href="#">Inclusion</a>
<ul class="sub-menu">
<li id="menu-item-14036" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-14036"><a href="#">SEND and Inclusion</a></li>
<li id="menu-item-14037" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-14037"><a href="#">Anti-Bullying</a></li>
<li id="menu-item-14038" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-14038"><a href="#">Pupil Premium Checklist</a></li>
</ul>
</li>
<li id="menu-item-14039" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children menu-item-14039"><a href="#">Key Information</a>
<ul class="sub-menu">
<li id="menu-item-14040" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-14040"><a href="#">Term Dates</a></li>
<li id="menu-item-14041" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-14041"><a href="#">Uniform</a></li>
<li id="menu-item-14042" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-14042"><a href="#">Lost Property</a></li>
<li id="menu-item-14043" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-14043"><a href="#">SchoolComms</a></li>
<li id="menu-item-14044" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-14044"><a href="#">School Menu</a></li>
</ul>
</li>
<li id="menu-item-14045" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-14045"><a href="#">Nursery</a></li>
<li id="menu-item-14046" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children menu-item-14046"><a href="#">Supporting your child’s learning</a>
<ul class="sub-menu">
<li id="menu-item-14047" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-14047"><a href="#">Supporting your child’s learning</a></li>
<li id="menu-item-14048" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-14048"><a href="#">Useful Websites</a></li>
</ul>
</li>
<li id="menu-item-14049" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-14049"><a href="#">Admissions</a></li>
</ul>
</li>
<li id="menu-item-88" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-88"><a href="#">Curriculum</a></li>
<li id="menu-item-124" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-124"><a href="#">Contact</a></li>
</ul>
</div>
</nav>
<nav class="sub-nav">
<div class="menu-sub-menu-container">
<ul id="menu-sub-menu" class="menu">
<li id="menu-item-1701" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-1701"><a href="#">Calendar</a></li>
<li id="menu-item-13879" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-13879"><a href="#">Facebook</a></li>
<li id="menu-item-13880" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-13880"><a href="#">Twitter</a></li>
<li id="menu-item-13881" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-13881"><a href="#">YouTube</a></li>
<li id="menu-item-112" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-112"><a href="#">Policies</a></li>
<li id="menu-item-5139" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-5139"><a href="#">Vacancies</a></li>
</ul>
</div>
</nav>
</div>
</div>
</header>
</body>
</html>