本文主要介绍亚马逊的各种导航菜单和解决方案。本文通过示例代码向您详细介绍，对您的学习或工作有一定的参考价值。需要的朋友可以参考一下。
和Bootstrap一样，AmazeUI提供的导航菜单也喜欢蜷缩在右上角的一个按钮里，然后一键下拉很远的距离。这很不友好。之前《【AmazeUI】手机版页面的顶部导航条Header与侧边导航栏offCanvas》(点击打开链接)是一个解决方案，但是对于一些不使用页面的页面，这个解决方案是无能为力的。
这个问题有以下几种解决方案：
一、改造AmazeUI提供的手机端文字横排菜单
AmazeUI提供的手机上的文字横菜单背景色为白色，字体为蓝色。里面没有对应的类来重写字体。
我们可以给背景和文本添加一个css，并重写它的背景和文本颜色
效果如下：
代码如下：
H1导航菜单-水平文本样式/h1
风格
/*这是重写文本的颜色*/。am-菜单-默认。am-menu-nav a {
color: # 222
}
/*这里是重写背景的颜色*/。am-menu-nav
背景# f1f1f1
}
/style
div data-am-widget=' menu ' class=' am-menu am-menu-default '
a href=' JavaScript : void(0)' class=' am-menu-toggle a-in-menu ' I class=' am-menu-toggle-icon am-icon-bar/I/a
！-表示每个菜单占用3个网格，即在12个网格和1行的布局中占用4个网格-
ul class=' am-menu-nav am-avg-sm-3 '
！-意味着这个项目有一个下拉菜单-
li class='am-parent '
A href='# '项目1/a
ul class=' am-menu-sub am-collapse am-avg-sm-4 '
Lia href='# '项目1-1/a/li
Lia href='# '项目1-2/a/li
Lia href='# '项目1-3/a/li
Lia href='# '项目1-4/a/li
Lia href='# '项目1-5/a/li
Lia href='# '项目1-6/a/li
/ul
/li
Lia href='# '项目2/a/li
Lia href='# '项目3/a/li
Lia href='# '项目4/a/li
li class='am-parent '
A href='# '项目5/a
ul class=' am-menu-sub am-collapse am-avg-sm-4 '
Lia href='# '项目5-1/a/li
Lia href='# '项目5-2/a/li
Lia href='# '项目5-3/a/li
Lia href='# '项目5-4/a/li
Lia href='# '项目5-5/a/li
Lia href='# '项目5-6/a/li
/ul
/li
/ul
/div
二、利用按钮组与下拉按钮
这里用的是求解Bootstrap导航条的思路，《【Bootstrap】导航栏navbar在IE8上的缺陷与解决方案》(点击打开链接)，但是AmazeUI中按钮组和下拉按钮的组合比较弱。没有提供下拉按钮和按钮组合的按钮组。同时，它的网格布局无法约束其下拉按钮的大小，因此需要调整几个div，调整它们的宽度和边距属性，并规范它们的大小。
