关于前端导航菜单栏多余横框的问题

img

对应代码：

销量
从高到低 从低到高
                </el-submenu>
                <el-submenu index="2">
                    <template slot="title" style="position: absolute;z-index: 999">价格</template>
                    <div style="position: absolute;z-index: 20;left:109px;top:49px;overflow:hidden">
                        <el-menu-item index="2-1">从高到低</el-menu-item>
                        <el-menu-item index="2-2">从低到高</el-menu-item>
                    </div>

                </el-submenu>
                <div style="float: right;position: relative;top: 10px;right: 10px">
                    <el-input type="text" placeholder="请输入关键字搜索">
                        <el-button slot="append" icon="el-icon-search"></el-button>
                    </el-input>
                </div>

            </el-menu>
        </div>

如何把多余的横框消除

首先你要找到这个东西是由那部分代码实现的，按F12有个小箭头样子的图标，点击然后点那个空白盒子，找到哪行代码删掉就行

根据代码，可能是因为价格菜单的下拉框没有设置宽度，导致下拉框的宽度默认为父级元素的宽度，从而出现多余的框。可以尝试给价格菜单的下拉框设置一个固定宽度，例如：

<el-submenu index="2">
  <template slot="title" style="position: absolute;z-index: 999">价格</template>
  <div style="position: absolute;z-index: 20;left:109px;top:49px;overflow:hidden;width: 100px;">
    <el-menu-item index="2-1">从高到低</el-menu-item>
    <el-menu-item index="2-2">从低到高</el-menu-item>
  </div>
</el-submenu>

这样就可以避免出现多余的框了。