# 控制显示方向 ## 6.1.6.控制显示方向 在dropdown-menu-nav上加下面的class可控制位置： | 类名 | 位置 | | --- | --- | | dropdown-bottom-left | 下左弹出 | | dropdown-bottom-center | 下中弹出 | | dropdown-bottom-right | 下右弹出 | | dropdown-top-left | 上左弹出 | | dropdown-top-center | 上中弹出 | | dropdown-top-right | 上右弹出 | | dropdown-left-top | 左上弹出 | | dropdown-left-center | 左中弹出 | | dropdown-left-bottom | 左下弹出 | | dropdown-right-top | 右上弹出 | | dropdown-right-center | 右中弹出 | | dropdown-right-bottom | 右下弹出 | ~~~ <!-- Bottom Center --> <div class="dropdown-menu dropdown-hover"> <button class="layui-btn layui-btn-primary icon-btn">Bottom <i class="layui-icon layui-icon-drop"></i> Center </button> <ul class="dropdown-menu-nav dropdown-bottom-center"><!-- 这里加控制方向的类 --> <div class="dropdown-anchor"></div> <li><a>1st menu item</a></li> <li><a>2nd menu item</a></li> <li><a>3rd menu item</a></li> </ul> </div> <!-- Bottom Right --> <div class="dropdown-menu dropdown-hover"> <button class="layui-btn layui-btn-primary icon-btn">Bottom Right <i class="layui-icon layui-icon-drop"></i> </button> <ul class="dropdown-menu-nav dropdown-bottom-right"><!-- 这里加控制方向的类 --> <div class="dropdown-anchor"></div> <li><a>1st menu item</a></li> <li><a>2nd menu item</a></li> <li><a>3rd menu item</a></li> </ul> </div> ~~~