Javascript jQuery滑动切换菜单上的跳跃动画切换

所以我的问题和标题一样简单，当我点击黑色大“V”来切换菜单时，动画会跳转到带有子菜单的

我尝试了多种方法，但似乎都不起作用，我在

宽度方面遇到了类似的问题，我通过将
宽度设置为100%解决了这个问题。在我的搜索中，我看到有人说jQuery无法计算元素的高度，但如果我尝试向元素添加高度，它会完全破坏菜单

这是密码笔，你可以体验我的问题

HTML

Javascript/jQuery

$(document).ready(function() {

      $('.sub-menu-1, .sub-menu-2').hide();
      $('.toggle-1').click( function() {
         $(this).next('.sub-menu-1').slideToggle();
      });

      $('.toggle-2').click( function() {
         $(this).next('.sub-menu-2').slideToggle();
      });

   });

提前感谢您，希望无人能帮助我。
我想唯一的问题是您没有将
清除
属性设置为您的浮动。如果将其设置为：

.main-menu a {
    margin-right: 20px;
}
.main-menu .toggle-1, .main-menu .toggle-2 {
    float: right;
    clear: none;
    font-size: 20px;
    font-weight: bold;
    width: 20px;
}

你很好。然后，您也不需要使用
转换：translate
将元素移回原处。这是代码笔的一个分支：
问题是由设置为
display:block的
引起的在css中

切换
.main menu a
和
.main menu.toggle-1、.main menu.toggle-2
以同时显示
内联块修复了该问题。然后，您还可以删除一些以前用于强制将这些元素放置在文档流位置之外的其他不必要的css攻击

下面是更新后的CSS，您可以看到两个子菜单都工作的笔叉

谢谢你的回答，黑客是因为宽度问题，我以前有，但这个解决方案很好，干净。谢谢你的回答，它是有用的。
$(document).ready(function() {

      $('.sub-menu-1, .sub-menu-2').hide();
      $('.toggle-1').click( function() {
         $(this).next('.sub-menu-1').slideToggle();
      });

      $('.toggle-2').click( function() {
         $(this).next('.sub-menu-2').slideToggle();
      });

   });

.main-menu a {
    margin-right: 20px;
}
.main-menu .toggle-1, .main-menu .toggle-2 {
    float: right;
    clear: none;
    font-size: 20px;
    font-weight: bold;
    width: 20px;
}

.main-menu a {
  display: inline-block;
}
.main-menu .toggle-1, .main-menu .toggle-2 {
  display: inline-block;
  float: right;
  font-size: 20px;
  font-weight: bold;
  width: 20px;
}