导航越来越被切断

Question

所以我们在Wordpress上使用Cherry Frameworks（ugh）。第三级导航正在被切断。我试过操纵CSS来解决这个问题无济于事。框架中没有选项。

问题出在“服务”菜单中。调整屏幕大小以查看问题。

我的解决方案是将第三级导航推向左侧而不是右侧。关于如何做到这一点的想法？

http://dev.torontofamilytherapist.com/

Answer 1

因此，使用chrome的检查元素，我能够找出需要更改的内容：

#topnav li .sub-menu .sub-menu {
  left: 100%;
  margin: -10px 0 0 2px;
}

更改为：

#topnav li .sub-menu .sub-menu {
  left: -100%;
  margin: -12px 0 0 2px;
  width: 100%;
}

结果：

正如您所看到的那些项目出现在左侧，但您需要进行一些css调整才能让它们正确地显示 juuuust 。

以下是使用Chrome的开发者工具解决CSS问题的方法：

1. 右键点击有问题的元素，在这种情况下：我们正在查看＆＃34;服务＆＃34;，然后选择＆＃34;检查元素＆＃34;：



1. 您现在应该检查当前的CSS：



1. 现在，当你悬停时这些物品出现时，你必须“强迫”这些物品。悬停状态。



1. 这就是乐趣的开始。您必须确保找到合适的元素来强制悬停。我实际上对此有点挣扎，所以我最终将力悬停状态添加到许多其他元素，直到它最终出现（绿色菜单）

2. 重复相同的过程以获得第三层菜单。

3. 现在您右键单击实际菜单并选择＆＃34;检查元素＆＃34;再次 - 这一次，因为菜单是FORCED HOVER，当移动鼠标时，项目将保持选中状态，你终于可以看到实际的CSS。

它实际上比它需要的更难，因为主题真的有一些反直觉的设置来显示这些菜单（为什么不只是在悬停？它真的感觉像多个项目悬停..）