Question

我无法弄清楚为什么我的移动子菜单在Chrome和Firefox中表现不同。在1200px以下的任何分辨率下查看http://weebowebdev.com/。单击菜单切换以打开菜单，将鼠标悬停在“属性搜索”链接上以查看子菜单。

你会在Firefox中注意到菜单的行为与我想要的完全一致。但是，在Chrome中，您会注意到子菜单卡在主菜单容器中。我需要弄清楚如何修复Chrome中的子菜单，使其行为与Firefox中的完全相同。任何帮助表示赞赏。

css如下：

.main-navigation ul ul {
  box-shadow: 0px 3px 3px rgba(0, 0, 0, 0.2);
  z-index: 99999;
  transition: all 0.45s ease 0s;
  text-align: left;
  width: 185px;
  left: -999em;
  position: absolute;
  margin-top: 30px;
  margin-left: -25px;
  padding: 0;
  -webkit-transition: all 0.45s ease;
  -moz-transition: all 0.45s ease;
  -o-transition: all 0.45s ease;
  transition: all 0.45s ease;
}

@media only screen and (max-width: 1200px) {
  .main-navigation ul ul {
    margin-top:32px;
    position:absolute;
  }
}

Answer 1

从子菜单中删除低于1200px分辨率的 margin-left：-25px 。

    override func prepare(for segue: UIStoryboardSegue, sender: Any?) {

    if( segue.identifier == "productList_to_detail" ) {

        let VC1 = segue.destination as! ShopItemVC
        if afData == 1 {
          if let indexPath = self.tableView.indexPathForSelectedRow {
                let productIdToGet = sCategory[indexPath.row]
                VC1.product_id = productIdToGet.product_id
            }
        }
    }
}

添加此CSS

.main-navigation ul ul {
    box-shadow: 0px 3px 3px rgba(0, 0, 0, 0.2);
    z-index: 99999;
    transition: all 0.45s ease 0s;
    text-align: left;
    width: 185px;
    left: -999em;
    position: absolute;
    margin-top: 30px;
    margin-left: -25px;
    padding: 0;
    -webkit-transition: all 0.45s ease;
    -moz-transition: all 0.45s ease;
    -o-transition: all 0.45s ease;
    transition: all 0.45s ease;
}

Answer 2

从overflow:hidden

中删除.menu-top-menu-container

或为此添加CSS

.menu-top-menu-container {
    overflow: visible !important;
}

Answer 3

任何人都看不到您的情况，您必须提出问题，而不是将您的工作分配给StackOverFlow的专家。但我看到你的网站，你的CSS代码很脏。你的菜单布局使用负边距!!它太荒谬了。您必须清理CSS代码，然后使用position: relative;作为第二个ul。我建议在Mobile中使用叠加设计菜单。下拉菜单在移动设计中不是很正式。左或右使用大的负值是不合理的。

您可以在移动设备中使用Bootstrap或UIKit或Semantic UI的样式作为您的菜单。

祝你好运。

移动子菜单的chrome / ff不同

3 个答案: