说明

当前我使用的主题是calmlog魔改版本，后续完善好了之后会把该主题开放出来，主题名字就叫jpress_calmlog_zb。

前提

现在先说说下面改造的代码基于calmlog主题或者是使用bootstrap设置菜单的主题都是适用的，如果不是也没关系，也会说下代码逻辑是什么，如果是小白可以看看。

改造ing

先把代码贴上来，各位姥爷有问题下面评论区提出来，或者加我微信（网页右侧、移动端下方 二维码）

<nav class="navbar navbar-expand-lg navbar-light">
	<a class="navbar-brand" href="/">
			<img src="#option('calmlog_logo','img/logo.jpg')" width="144" alt="">
	</a>
	<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
			<span class="navbar-toggler-icon"></span>
	</button>
	<div class="collapse navbar-collapse justify-content-end" id="navbarNav">
			<ul class="nav navbar-nav">
					#for(menu : MENUS)
							#if(menu.hasChild())
							<li class="nav-item dropdown #(menu.isActive ? 'active' : '')">
									<a class="nav-link" href="#(WEB_DOMAIN + menu.url)"  data-toggle="dropdown">#(menu.text)<span class="sr-only">(current)</span></a>
									<ul class="dropdown-menu">
											#for(childMenu : menu.getChilds())
													<li style="padding:10px;"> <a href="#(WEB_DOMAIN + childMenu.url ??)">#(childMenu.text ??)</a> </li>
											#end
									</ul>
							</li>
							#else
							<li class="nav-item #(menu.isActive ? 'active' : '')">
									<a class="nav-link" href="#(WEB_DOMAIN + menu.url)">#(menu.text) <span class="sr-only">(current)</span></a>
							</li>
							#end
					#end
			</ul>
	</div>
</nav>

上面代码就是二级菜单的代码，如果想鼠标移动到一级菜单，二级菜单自动出来，增加如下css样式

.navbar .nav > li:hover .dropdown-menu {
    display: block;
}

二级菜单怎么实现

二级菜单怎么实现？我们看一段代码

#for(menu : MENUS)
    <li> 
		   <a href="#(menu.url ??)">#(menu.text ??)</a>
			 #if(menu.hasChild())
					<ui class="二级菜单的class">
					#for(childMenu : menu.getChilds())
							<li> <a href="#(menu.url ??)">#(menu.text ??)</a> </li>
					#end
			</ui>
			#end
		</li>
#end

代码中基本的逻辑还是先展示一级菜单，循环遍历出的时候，去判断一级菜单下是否有子菜单，有的话就把子菜单获取到再循环遍历一般。以此可以推理三级、四级菜单也是可以同理获得。