Question

我正在试图弄清楚如何让我的CSS菜单下拉并飞出（悬停在）左侧父母的右侧，并自动飞向左侧为正确的父母。这是完整的主题在这里完成： http://demo2.woothemes.com/?name=sentient 我正在尝试将迷你购物车的风格复制到我的其他wootheme。如果您在购物车中添加了一些东西并将鼠标悬停在迷你购物车上，则可以看到。我的菜单样式设置为始终正确，我无法弄清楚在哪里进行调整。谢谢你的帮助！

Answer 1

您需要使用javascript检查下拉菜单的位置并有条件地应用样式（这不会完全正常，但这是个主意）：

的jQuery

    $('.dropdown-parent').hover( function(){ 
      //If to left of center of screen
      $(this).children('.dropdown').css('dropdown-right');
      $(this).children('.dropdown').css('right', $(this).width());

      //Else if to right of screen
      $(this).children('.dropdown').css('dropdown-left');
      $(this).children('.dropdown').css('left', $(this).width());
    }, function(){ 
      $(this).hide();
    } )

CSS：

.dropdown-parent {
  position:relative;
}      
.dropdown {
  position: absolute;
}

Answer 2

JSFiddle Demo：纯CSS

将下拉列表的ul放在导航栏列表的li内。通常情况下，嵌套的ul会出现在li的正下方。对position:absolute;应用ul，对其width进行调整，如果需要，请调整margin-left的{{1}}。

CSS菜单 - 自动左右位置？

2 个答案: