Question

我被要求在客户的网站上修改菜单，因为网站的第4个子菜单没有弹出链接旁边。该网站是https://www.abrimagery.com/store/如果你去Borosilicate Flameworking＆gt; 33 COE硼硅酸盐火焰加工＆gt; 33 COE色棒材料和管材＆gt; ACME彩色玻璃，你会明白我的意思。子菜单弹出一个固定的位置，你不能将鼠标移到它上面。我能够将定位更改为相对，并且菜单会在链接旁边弹出，但是会在链接下留下一个空白区域。经过一番研究，我发现相对定位的工作方式。有人可以看着这个并指出我正确的方向，因为我在我脑海中。我试图搜索谷歌并找到商店模板的一些文档，但它根本没用。我是MSP的硬件技术人员，被问到我是否可以解决这个问题，因为我曾提到我在大学里参加了一些网页设计课程。我非常感谢任何帮助。

#drop-box, .drop-box-subcat, .drop-box-subsubcat, .drop-box-3subcat, .drop-box-4subcat{
position:absolute;
left:0px;
z-index:100;
display: none;
text-align:left;
padding:0;
top:57px;
border: none;
width:auto;
background: #fbfbfb;
padding:20px 15px 20px 15px;
-moz-box-shadow:0px 10px 15px 2px #727272;
-webkit-box-shadow:  0px 10px 15px 2px #727272 ;
box-shadow:  0px 10px 15px 2px #727272 ;

}

.drop-box-subsubcat, .drop-box-3subcat, .drop-box-4subcat{left:200px;top:-7px;}
.drop-box-4subcat{top:50px;}

.cat-name, .sub-cat-name, .subsub-cat-name{
display: block;
float:left;
position:relative;
left:0px;
top:0px;

Answer 1

请勿使用像素进行子菜单的左侧定位。在文件unishop.css第683行中更改css规则以下。

.drop-box-subsubcat, .drop-box-3subcat, .drop-box-4subcat {
    left: calc(100% + 15px);
    top: -7px;
}

Answer 2

您可以尝试将其应用于.drop-box-4subcat

.drop-box-4subcat {
   top: inherit;
   margin-top: -50px;
}

希望它有助于其他第四类下拉菜单！

下拉子类别菜单定位。

2 个答案: