# 控制顯示方向 ## 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> ~~~