下拉菜单移动元素

$(document).ready(function(){
  $("#menu > li > a").on("click", function(e){
    if($(this).parent().has("ul")) {
      e.preventDefault();
    }
    if(!$(this).hasClass("open")) {
      $("#menu li ul").slideUp(350);
      $("#menu li a").removeClass("open");
      $(this).next("ul").slideDown(350);
      $(this).addClass("open");
    }
    else if($(this).hasClass("open")) {
      $(this).removeClass("open");
      $(this).next("ul").slideUp(350);
    }
  });
});

当然——你可以用transform

来旋转下拉框

#menu { 
    transform: rotate(45deg);
}

可以添加到你的CSS中来达到这个目的。

http://jsfiddle.net/LthgY/1281/

---

编辑:

从注释

关于元素保持直立，但"向下滑动"对角线。

您可能需要做一些微调，但这将说明总体思想:

http://jsfiddle.net/LthgY/1282/

我修改了以下CSS规则:

 #menu li ul {
   transform: rotate(45deg);
   transform: translateX( -50px);
   transform: translateY(10px);
   display: none;
   line-height: 70%;
  }

本质上这做的是rotates在菜单中的子列表，然后translates (moves)子列表，以弥补由旋转变换引起的位置偏移。

$(document).ready(function() {
  $("#menu > li > a").on("click", function(e) {
    if ($(this).parent().has("ul")) {
      e.preventDefault();
    }
    if (!$(this).hasClass("open")) {
      $("#menu li ul").slideUp(350);
      $("#menu li a").removeClass("open");
      $(this).next("ul").slideDown(350);
      $(this).addClass("open");
    } else if ($(this).hasClass("open")) {
      $(this).removeClass("open");
      $(this).next("ul").slideUp(350);
    }
  });
});

ol,
ul {
  list-style: none;
}
/* 
 *  modified CSS rule  below
 */
#menu {
  margin-left: 65px;
}
#menu li ul {
  transform: translateX(-90px);
  transform: rotate(45deg);
  margin-left: -30px;
  display: none;
  line-height: 70%;
}
#menu li ul li {
  transform: rotate(-45deg);
}
#menu li ul li a {
  font-size: 11px;
  text-decoration: none;
  transform: translateY(-10px);
}
/* end of modified rules */
#menu a {
  text-decoration: none;
  display: inline-block;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul id="menu">
  <li><a class="menu1" href="#">Menu1</a>
    <ul>
      <li><a class="menu1_1" href="#">A</a>
      </li>
      <li><a class="menu1_2" href="#">B</a>
      </li>
      <li><a class="menu1_3" href="#">C</a>
      </li>
      <li><a class="menu1_4" href="#">D</a>
      </li>
    </ul>
  </li>
  <li><a class="menu2" href="#">Menu2</a>
    <ul>
      <li><a class="menu1_1" href="#">A</a>
      </li>
      <li><a class="menu1_2" href="#">B</a>
      </li>
      <li><a class="menu1_3" href="#">C</a>
      </li>
      <li><a class="menu1_4" href="#">D</a>
      </li>
    </ul>
  </li>
  <li><a class="menu3" href="#">Menu3</a>
    <ul>
      <li><a class="menu1_1" href="#">A</a>
      </li>
      <li><a class="menu1_2" href="#">B</a>
      </li>
      <li><a class="menu1_3" href="#">C</a>
      </li>
      <li><a class="menu1_4" href="#">D</a>
      </li>
    </ul>
  </li>
  <li><a class="menu4" href="#">Menu4</a>
    <ul>
      <li><a class="menu1_1" href="#">A</a>
      </li>
      <li><a class="menu1_2" href="#">B</a>
      </li>
      <li><a class="menu1_3" href="#">C</a>
      </li>
      <li><a class="menu1_4" href="#">D</a>
      </li>
    </ul>
  </li>
  <li><a class="menu5" href="#">Menu5</a>
    <ul>
      <li><a class="menu1_1" href="#">A</a>
      </li>
      <li><a class="menu1_2" href="#">B</a>
      </li>
      <li><a class="menu1_3" href="#">C</a>
      </li>
      <li><a class="menu1_4" href="#">D</a>
      </li>
    </ul>
  </li>
  <li><a class="menu6" href="#">Menu6</a>
    <ul>
      <li><a class="menu1_1" href="#">A</a>
      </li>
      <li><a class="menu1_2" href="#">B</a>
      </li>
      <li><a class="menu1_3" href="#">C</a>
      </li>
      <li><a class="menu1_4" href="#">D</a>
      </li>
    </ul>
  </li>
  <li><a class="menu7" href="#">Menu7</a>
    <ul>
      <li><a class="menu1_1" href="#">A</a>
      </li>
      <li><a class="menu1_2" href="#">B</a>
      </li>
      <li><a class="menu1_3" href="#">C</a>
      </li>
      <li><a class="menu1_4" href="#">D</a>
      </li>
    </ul>
  </li>
</ul>

注意仍然有一些修饰性的问题需要解决，比如字母出现向后——但至少这个答案给了你一个如何做到这一点的基本想法。